<template>
    <div style="position: relative; ">
        <div class="wineMenu">
            <div v-for="(item, index) in menuList" :key="index" :class="{ menuActive: index == isActive }">
                <span @click="menuChose(index)">{{ item }}</span>
                <div></div>
            </div>
        </div>
        <!-- 待寄存确认 start -->
        <div class="wineContent" v-if="isActive == '0'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">桌号：</span>
                            <el-input v-model="WineListDatas.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('WineListDatas')"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="WineListDatas.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">订台人：</span>
                            <el-input v-model="WineListDatas.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineListDatas.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div></div>
                        <div class="btn-item">
                            <div class="btn1" @click="getWineList()">查询</div>
                            <div class="btn3" @click="resetWineList('1')">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="WineList.data" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="wineItemAdds" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" min-width="12%"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" min-width="12%" align="center"></el-table-column>
                        <el-table-column label="是否整瓶" min-width="6%" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeQty" label="存酒数量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="容量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" min-width="12%" align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="订台人" min-width="6%"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="danger" @click="wineItemAdd(scope.row)">添加</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="WineListCurrentChange"
                        v-model:currentPage="WineListDatas.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper" :total="WineList.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ wineItem.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ wineItem.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ wineItem.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ USER_INFO.userName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>存酒名称：</div>
                        <span v-if="takewinFlag == false">{{ wineItem.goodsName }}</span>
                        <el-input v-else style="width: 100%;flex: 1;" v-model="wineItemCopy.goodsName" placeholder="请输入" class="phone-box-jt"></el-input>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">{{ wineItem.uomName }}</span>
                    </div>
                    <div>
                        <div>存酒时长：</div>
                        <span class="frame">{{ wineItem.keepTime }}</span>
                    </div>
                    <div v-if="wineItem.isFull == 1">
                        <div>存酒数量：</div>
                        <span class="frame" v-if="takewinFlag == false">{{ wineItem.remainQty }}</span>
                        <el-input v-else style="width: 100%;flex: 1;" v-model="wineItemCopy.remainQty" placeholder="请输入" class="phone-box-jt"></el-input>
                    </div>
                    <div v-if="wineItem.isFull != 1">
                        <div>容量：</div>
                        <span class="frame" v-if="takewinFlag == false" >{{ wineItem.remainQty }}</span>
                        <el-input v-else style="width: 100%;flex: 1;" v-model="wineItemCopy.remainQty" placeholder="请输入" class="phone-box-jt"></el-input>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <viewer class="screen-view" v-if="wineItemList.length > 0">
                              <img v-for="(item, index) in wineItemList" :key="index" :src="item" alt="" > 
                    </viewer>
                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div @click="numInput('1')">1</div>
                        <div @click="numInput('2')">2</div>
                        <div @click="numInput('3')">3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>·</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <!-- <div v-has-role="'wine-print'" @click="PrintStoreWine(wineItem.code)">补打存酒小票</div> -->
                        <div style="width: 45%;" @click="wineState(wineItem, '0', 'save')">存酒拒绝</div>
                        <el-button style="width: 45%;" :loading="isLoading" class="confirm" @click="wineState(wineItem, '1', 'save')">确认</el-button>
                    </div>
                </div>

            </div>
        </div>
        <!-- 待寄存确认 end -->
        <!-- 待领取确认 start -->
        <div class="wineContent" v-if="isActive == '1'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">桌号：</span>
                            <el-input v-model="WineListDatas.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('WineListDatas')"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="WineListDatas.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">订台人：</span>
                            <el-input v-model="WineListDatas.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="below-item">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineListDatas.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div></div>
                        <div class="btn-item">
                            <div class="btn1" @click="getWineList()">查询</div>
                            <div class="btn3" @click="resetWineList('2')">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="WineList.data" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="wineItemAdds" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" min-width="60"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" min-width="60" align="center"></el-table-column>
                        <el-table-column label="是否整瓶" min-width="60" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="takenQty" label="取酒数量" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="容量" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" min-width="60" align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="订台人" min-width="60"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="danger" @click="wineItemAdd(scope.row)">添加</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="WineListCurrentChange"
                        v-model:currentPage="WineListDatas.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper" :total="WineList.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ wineItem.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ wineItem.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ wineItem.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ USER_INFO.userName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>存酒名称：</div>
                        <span>{{ wineItem.goodsName }}</span>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">{{ wineItem.uomName }}</span>
                    </div>
                    <div>
                        <div>存酒时长：</div>
                        <span class="frame">{{ wineItem.keepTime }}</span>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <viewer class="screen-view" v-if="wineItemList.length > 0">
                              <img v-for="(item, index) in wineItemList" :key="index" :src="item" alt="" > 
                    </viewer>
                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>·</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <!-- <div @click="PrintStoreWine(wineItem.code)">补打取酒小票</div> -->
                        <div style="width: 45%;" @click="wineState(wineItem, '0', 'take')">取酒拒绝</div>
                        <div style="width: 45%;" class="confirm" @click="wineState(wineItem, '1', 'take')">取酒确认</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 待领取确认 end -->
        <!-- 存酒记录 start -->
        <div class="wineContent" v-if="isActive == '2'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item" style="width: 30%;">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="WineRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item" style="width: 21%;">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="WineRecordData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item" style="width: 25%;">
                            <span class="book-title">营销员：</span>
                            <el-input v-model="WineRecordData.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item" style="width: 21%;">
                            <span class="book-title">存酒员：</span>
                            <el-input v-model="WineRecordData.waiterName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                      
                        <div class="upper-item upper-date" style="width: 30%;">
                            <span class="book-title">存酒日期：</span>
                            <el-date-picker v-model="StoreDateTemp" type="datetimerange"
                                value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" style="height: 2.7vw;" @change="getStoreDate">
                            </el-date-picker>
                        </div>
                        <div class="upper-item" style="width: 21%;">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineRecordData.isFull" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item" style="width: 21%;">
                            <span class="book-title">状态：</span>
                            <el-select v-model="WineRecordData.state" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in stateOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        
                        <div class="upper-item" style="width: 25%;">
                            <span class="book-title">剩余数量：</span>
                            <el-radio-group v-model="surNum" @change="surChange">
                                <el-radio label="1">全部</el-radio>
                                <el-radio label="2">大于0</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="upper-item upper-date" style="width: 38%;">
                            <span class="book-title">到期时间：</span>
                            <el-date-picker v-model="ExpireDateTemp" type="daterange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss"
                                start-placeholder="开始日期" end-placeholder="结束日期" style="height: 2.7vw;"
                                @change="getExpireDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                            <!-- <el-date-picker
                            is-range
                            v-model="endDate"
                            range-separator="一"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围"
                            style="height: 50px;"
                        ></el-date-picker> -->
                        </div>
                        <div class="btn-item" style="width: 30%;">
                            <div class="btn1" @click="GetStoreWineRecordList()">查询</div>
                            <div v-has-role="'wine-delay'" class="btn2" @click="wineDayShowDialog()">酒水延期</div>
                            <div class="btn3" @click="resetWineRecordList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="WineRecordList.data" tooltip-effect="dark" class="book-table"
                        @row-click="checkStoreDetail" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" align="center"
                            :min-width="orderColumnWidth"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column label="是否整瓶" align="center" :min-width="tableColumnWidth">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.6vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.6vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeQty" label="存酒数量" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="remainQty" label="剩余数量" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="uomName" label="单位" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="storeCapacity" label="容量" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="expireDate" label="到期时间" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column label="状态" align="center" :min-width="tableColumnWidth">

                            <template #default="scope">
                                <span v-if="scope.row.state == '0'" style="font-size: 0.6vw;">待寄存</span>
                                <span v-if="scope.row.state == '1'" style="font-size: 0.6vw;">已寄存</span>
                                <span v-if="scope.row.state == '3'" style="font-size: 0.6vw;">已领取</span>
                                <span v-if="scope.row.state == '4'" style="font-size: 0.6vw;">已过期</span>
                                <span v-if="scope.row.state == '5'" style="font-size: 0.6vw;">已回收</span>
                                <span v-if="scope.row.state == '9'" style="font-size: 0.6vw;">已拒绝</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="storeWineWaiter" label="存酒员" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="auditUserName" label="审核员" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="maintainUserName" label="营销员" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="remark" label="备注" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column prop="barCode" label="存酒码" align="center"
                            :min-width="tableColumnWidth"></el-table-column>
                        <el-table-column label="取酒记录" align="center" :min-width="tableColumnWidth">

                            <template #default="scope">
                                <div @click="checkStoreDetailJ(scope.row)"
                                    style="cursor: pointer; color: #00AAFF;font-size: 0.6vw;">查看明细</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="WineRecordListCurrentChange"
                        v-model:currentPage="WineRecordData.pageIndex" :page-size="8"
                        layout="total, prev, pager, next, jumper" :total="WineRecordList.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ theStoreDetail.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ theStoreDetail.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ theStoreDetail.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ theStoreDetail.storeWineWaiter }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>存酒名称：</div>
                        <span>{{ theStoreDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>存酒数量：</div>
                        <span class="frame">{{ theStoreDetail.storeQty }}</span>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">{{ theStoreDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>存酒时长：</div>
                        <span class="frame">{{ theStoreDetail.keepTime }}</span>
                    </div>
                </div>
                <div style="display: flex">
                    <div class="wineLogo" style="width: 54%;">
                        <div style="width: 35%;">存酒照片：</div>
                        <viewer class="screen-view" v-if="CjimgUrls.length > 0">
                              <img v-for="(item, index) in CjimgUrls" :key="index" :src="item" alt="" > 
                        </viewer>
                    </div>
                    <div class="wine_continar">
                        <div class="title">取酒码：{{ theStoreDetail.barCode }}</div>
                    </div>

                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>·</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <div v-has-role="'wine-print'" style="width: 100%;"
                            @click="PrintStoreWine(theStoreDetail.code)">补打存酒小票
                        </div>
                        <!-- <div>存酒拒绝</div>
                <div class="confirm">存酒确认</div> -->
                    </div>
                </div>

            </div>
        </div>
        <!-- 存酒记录 end -->

        <!-- 取酒记录 start -->
        <div class="wineContent" v-if="isActive == '3'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="TakeWineRecordData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="TakeWineRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="TakeWineRecordData.isFull" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="below-item">
                            <span class="book-title">状态：</span>
                            <el-select v-model="TakeWineRecordData.state" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option v-for="item in stateOpt2" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>

                        <div class="below-item upper-date" style="width: 39%;">
                            <span class="book-title">取酒日期：</span>

                            <el-date-picker v-model="TakeDateTemp" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" clear-icon
                                value-format="YYYY-MM-DD HH:mm:ss" @change="getTakeDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>

                        <div class="btn-item" style="width: 23%;">
                            <div class="btn1" @click="GetTakeWineRecordList()">查询</div>
                            <div class="btn3" @click="resetTakeWineRecordList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="TakeWineRecordList.data" tooltip-effect="dark"
                        class="book-table" style="width: 100%;" @row-click="checkTakeDetail"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="roomName" label="桌号" :min-width="orderColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column label="是否整瓶" :min-width="tableColumnWidth" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.isFull == '1'" style="font-size: 0.7vw;">整瓶</span>
                                <span v-if="scope.row.isFull != '1'" style="font-size: 0.7vw;">非整瓶</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="takenQty" label="数量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="takenCapacity" label="容量" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="takeDate" label="取酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="expireDate" label="到期时间" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="takeWineWaiter" label="取酒员" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <el-table-column prop="barCode" label="取酒码" :min-width="tableColumnWidth"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="取酒记录" align="center">
                        <template #default="scope">
                            <div @click="checkTakeDetail(scope.row)" style="cursor: pointer; color: #00AAFF;">查看明细</div>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="TakeWineRecordListCurrentChange"
                        v-model:currentPage="TakeWineRecordData.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper" :total="TakeWineRecordList.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ theTakeDetail.roomName }}</span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ theTakeDetail.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ theTakeDetail.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ theTakeDetail.takeWineWaiter }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>取酒名称：</div>
                        <span>{{ theTakeDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>取酒单位：</div>
                        <span class="frame">{{ theTakeDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>取酒数量：</div>
                        <span class="frame">{{ theTakeDetail.takenQty }}</span>
                    </div>
                </div>

                <div class="wineLogo" style="width: 54%;">
                    <div style="width: 35%;">存酒照片：</div>
                    <viewer class="screen-view" v-if="theTakeImg.length > 0">
                              <img v-for="(item, index) in theTakeImg" :key="index" :src="item" alt="" > 
                    </viewer>
                </div>



                <div class="digital—continar">
                    <div class="digital">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>·</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>
                    <div class="saveHand">
                        <div style="width: 100%;" @click="RePrintWineTake(theTakeDetail.code)">补打取酒小票</div>
                        <!-- <div>取酒拒绝</div>
                <div class="confirm">取酒确认</div> -->
                    </div>
                </div>

            </div>
        </div>
        <!-- 取酒记录 end -->

        <!-- 客遗回收记录 start -->
        <div class="wineContent" v-if="isActive == '4'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item" style="width:24%">
                            <span class="book-title">回收桌号：</span>
                            <el-input v-model="WineRecoveryRecordData.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('WineRecoveryRecordData')"></el-input>
                        </div>
                        <div class="upper-item" style="width:23%">
                            <span class="book-title">酒水名称：</span>
                            <el-input v-model="WineRecoveryRecordData.goodsName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item" style="width:24%">
                            <span class="book-title">回收人：</span>
                            <el-select v-model="WineRecoveryRecordData.recoveryUser" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in WaiterList" :key="item.userCode" :label="item.userName"
                                    :value="item.userCode"></el-option>
                            </el-select>
                        </div>
                        <div class="below-item" style="width:24%">
                            <span class="book-title">是否整瓶：</span>
                            <el-select v-model="WineRecoveryRecordData.recoveryType" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in recoveryTypeList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="upper-list">
                        <div class="below-item" style="width:24%">
                            <span class="book-title">回收类型：</span>
                            <el-select v-model="WineRecoveryRecordData.operType" placeholder="请选择"
                                :suffix-icon="IconDropDown">
                                <el-option v-for="item in recycleOperType" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="upper-item upper-date spe" style="width:38%">
                            <span class="book-title spe1">回收日期：</span>
                            <el-date-picker v-model="RecoveryDateTemp" type="daterange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss"
                                start-placeholder="开始日期" end-placeholder="结束日期" style="height: 2.7vw;"
                                @change="getRecoveryDate">
                            </el-date-picker>
                            <div class="time-radio">
                                <div>
                                    <el-radio v-model="timeType" label="0">营业日</el-radio>
                                </div>
                                <div >
                                    <el-radio v-model="timeType" label="1">自然日</el-radio>
                                </div>
                            </div>
                        </div>
                        <div class="below-item" style="width:3%">

                        </div>
                        <div class="btn-item">
                            <div class="btn1" @click="GetWineRecoveryRecordList()">查询</div>
                            <div class="btn3" @click="resetWineRecoveryRecordList()">清空筛选</div>
                        </div>
                    </div>

                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="WineRecoveryRecordList.data" tooltip-effect="dark"
                        class="book-table" style="width: 100%;" @row-click="checkRecoveryDetail"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="goodsName" label="酒水名称" min-width="10%" align="center"></el-table-column>
                        <el-table-column prop="recoveryType" label="是否整瓶" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="recoveryQty" label="回收数量" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="recoveryCapacity" label="容量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="roomName" label="回收桌号" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="recoveryUserName" label="回收人" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="operType" label="回收类型" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="recoveryDate" label="回收时间" min-width="15%"
                            align="center"></el-table-column>
                            <el-table-column label="状态" min-width="12%" align="center">
                            <template #default="scope" >
                                <div style="display: flex;justify-content: center;" v-if="scope.row.state == '0'">
                                    <span  style="font-size: 0.7vw;cursor: pointer;margin-right:1vw;color: #047ed7;" @click="opcoveWineState(scope.row.code,1)">审核通过</span>
                                    <span  style="font-size: 0.7vw;cursor: pointer;color: #ff6a00;" @click="opcoveWineState(scope.row.code,2)">拒绝</span>
                                </div>
                                <div style="display: flex;justify-content: center;" v-if="scope.row.state == '1'">
                                      <span  style="font-size: 0.7vw;text-align: left;margin-right:1vw;" >审核通过</span>
                                      <span  style="font-size: 0.7vw;text-align: left;color: #ff6a00;cursor: pointer;" v-if="['0015','0024', '0025','0030'].includes(ls.get('USER_INFO')?.orgCode)" @click="opcoveWineState(scope.row.code,2,'cx')">撤销通过</span>
                                </div>
                                <div style="display: flex;justify-content: center;" v-if="scope.row.state == '2'">
                                      <span  style="font-size: 0.7vw;text-align: left;" >已拒绝</span>
                                </div>
                                
                            </template>
                            </el-table-column>
                        <!-- <el-table-column label="取酒记录" align="center">
                        <template #default="scope">
                            <div @click="checkTakeDetail(scope.row)" style="cursor: pointer; color: #00AAFF;">查看明细</div>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="WineRecoveryRecordListCurrentChange"
                        v-model:currentPage="currentPage" :page-size="10" layout="total, prev, pager, next, jumper"
                        :total="WineRecoveryRecordList.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">客遗回收详情</div>
                    <!-- <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ RecoveryDetail.roomName }}</span></div> -->
                </div>
                <div class="vipUser">
                    <div>
                        <div>桌号：</div>
                        <span class="frame">{{ RecoveryDetail.roomName }}</span>
                    </div>
                    <div>
                        <div>回收人：</div>
                        <span class="frame">{{ RecoveryDetail.recoveryUserName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">客遗回收信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>取酒名称：</div>
                        <span>{{ RecoveryDetail.goodsName }}</span>
                    </div>
                    <div>
                        <div>取酒数量：</div>
                        <span class="frame">{{ RecoveryDetail.recoveryQty }}</span>
                    </div>
                    <div>
                        <div>取酒单位：</div>
                        <span class="frame">{{ RecoveryDetail.uomName }}</span>
                    </div>
                    <div>
                        <div>是否整瓶：</div>
                        <span class="frame">{{ RecoveryDetail.recoveryType }}</span>
                    </div>
                </div>
                <div class="UpImgBox">
                    <div class="upTitle" style="width: 20%;">存酒照片：</div>
                    <div class="ImgContent ke-imgbox">
                            <viewer class="screen-view" v-if="RecoveryImg.length > 0">
                              <img v-for="(item, index) in RecoveryImg" :key="index" :src="item" alt="" > 
                    </viewer>
                    </div>
                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>·</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>0</div>
                        <div><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <div style="width: 100%;" @click="RePrintWineTake(theTakeDetail.code)">补打取酒小票</div>
                        <!-- <div>取酒拒绝</div>
                <div class="confirm">取酒确认</div> -->
                    </div>
                </div>

            </div>
        </div>
        <!-- 客遗回收记录 end -->

        <!-- 底部菜单 存酒 start -->
        <div class="wineContent" v-if="footerAct == '0'">
            <div class="StorageNav">
                <div v-for="(item, index) in StorageNav" :key='index' :class="{ StorageClass: index == StorageAct }"
                    @click="StorageChage(index)">{{ item }}</div>
            </div>
            <!-- 本次消费存酒 start -->
            <div class="wineBoxLeft" v-if="StorageAct == 0">
                <div style="height: 0.35rem;"></div>
                <div>
                    <div class="upper-list" style="flex-wrap: nowrap">
                        <div class="upper-item" style="width: 20%;">
                            <span class="book-title">桌号：</span>
                            <el-input v-model="RoomConsumeData.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('RoomConsumeData')"></el-input>
                        </div>
                        <div class="upper-item" style="width: 30%;">
                            <span class="book-title">客户电话：</span>
                            <el-input v-model="RoomConsumeData.orderUserMobile" placeholder="请输入内容" class="book-text"
                                maxlength="11" type="number"></el-input>
                        </div>
                        <div class="upper-item" style="width: 25%;">
                            <span class="book-title">订台人：</span>
                            <el-input v-model="RoomConsumeData.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <!-- <div class="upper-item"></div><div class="upper-item"></div> -->
                        <div class="btn-item" style="width: 28%;">
                            <div class="btn1" @click="GetRoomConsumeWineList()">查询</div>
                            <div class="btn3" @click="resetRoomConsumeWineList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="RoomConsumeNewData.data" tooltip-effect="dark"
                        class="book-table roomData" style="width: 100%;" @row-click="RoomConsumeAdd"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">

                        <el-table-column prop="roomName" label="桌号" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="orderQty" label="数量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="orderTime" label="点单时间" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="订台人" min-width="6%"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="danger" @click="RoomConsumeAdd(scope.row)">添加</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="RoomConsumeNewDataCurrentChange"
                        v-model:currentPage="RoomConsumeData.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper" :total="RoomConsumeNewData.totalCount || 0">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight" v-if="StorageAct == 0">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ RoomConsumeItem.roomName }}</span></div>
                    <!-- <div>桌号：<span style="font-size: 20px; font-weight: bold;" @click="tabShow()">
                    <span v-if="!tabSelName.name">选择桌号</span>
                    <span v-if="tabSelName.name">{{ tabSelName.name }}</span>
                </span></div> -->
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <!-- <span class="frame">{{ RoomConsumeItem.memberName }}</span> -->
                        <span v-if="!vipMemberName" class="frame">手机号关联</span>
                        <span v-if="vipMemberName" class="frame">{{ vipMemberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <el-input class="phone-box" v-model="OpStoreWineData2.memberMobile" placeholder="请输入手机号"
                            maxlength="11" style="width: 55%; height: 2.5vw;background: #f9f9f9;"
                            @input="getRoomConsumeMobile(OpStoreWineData2.memberMobile)"></el-input>
                        <!-- <span class="frame">{{ RoomConsumeItem.memberMobile }}</span> -->
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ USER_INFO.userName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineSaveContent">
                    <div class="wineSaveTitle2">
                        <div>存酒名称</div>
                        <div>类型</div>
                        <div>数量(瓶)</div>
                        <div>存期(天)</div>
                        <div>操作</div>
                    </div>
                    <div class="wineSaveList overflow-y-list">
                        <div class="wineSaveItem2" v-for="(item, index) in RoomConsumeList" :key="index">
                            <div>{{ item.goodsName }}</div>
                            <div>
                                <el-select v-model="item.bottle" placeholder="请选择" @change="onSelect(item)"
                                    :disabled="item.storeType == '1'" :suffix-icon="IconDropDown">
                                    <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div><el-input v-model="item.storeQty" style="width: 4vw;" maxlength="3"
                                    @focus="onfocus(item)" ref="inputRef" @blur="onblur" @input="oninput(item)"
                                    @click="getInputType('storeQty', index)"></el-input></div>
                            <div><el-input v-model="item.storeDay" style="width: 4vw;" maxlength="3"
                                    @click="getInputType('storeDay', index)" disabled></el-input></div>
                            <div style="color: #00AAFF; cursor: pointer;" @click="RoomConsumeDel(index)">删除</div>
                        </div>
                    </div>
                </div>
                <div class="UpImgBox">
                    <div class="upTitle">存酒照片：</div>
                    <div class="ImgContent">
                        <!-- <div v-for="(image, index) in images" :key="index" class="ImgList">
                            <img :src="image" />
                        </div> -->
                        <viewer class="screen-view" v-if="images.length > 0">
                              <img v-for="(item, index) in images" :key="index" :src="item" alt="" > 
                        </viewer>
                        <div class="ImgAdd"><input type="file" @change="handleFiles" multiple accept="image/*" /></div>
                    </div>
                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div @click="Num('RoomConsume', '1')">1</div>
                        <div @click="Num('RoomConsume', '2')">2</div>
                        <div @click="Num('RoomConsume', '3')">3</div>
                        <div @click="Num('RoomConsume', '4')">4</div>
                        <div @click="Num('RoomConsume', '5')">5</div>
                        <div @click="Num('RoomConsume', '.')">·</div>
                        <div @click="Num('RoomConsume', '6')">6</div>
                        <div @click="Num('RoomConsume', '7')">7</div>
                        <div @click="Num('RoomConsume', '8')">8</div>
                        <div @click="Num('RoomConsume', '9')">9</div>
                        <div @click="Num('RoomConsume', '0')">0</div>
                        <div @click="numDel('RoomConsume')"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <!-- <div>补打存酒小票</div> -->
                        <!-- <div>存酒拒绝</div> -->
                            <el-button :loading="isLoading"  v-has-role="'wine-print'" class="confirm" @click="OpStoreWine2(RoomConsumeList)"
                            style="width: 100%;">存酒确认</el-button>

                    </div>
                </div>

            </div>
            <!-- 本次消费存酒 end -->
            <!-- 手动选择存酒 start -->
            <div class="wineBoxLeft" v-if="StorageAct == 1">
                <div style="height: 0.35rem;"></div>
                <!-- <div>
                <div class="upper-list">
                    <div class="upper-item">
                        <span class="book-title">桌号：</span>
                        <el-input v-model="input" placeholder="请输入内容" class="book-text"></el-input>
                    </div>
                    <div class="btn-item">
                        <div class="btn1">查询</div>
                        <div class="btn3">清空筛选</div>
                    </div>
                </div>
            </div> -->

                <div class="wineMall">
                    <div class="MallTitle">
                        <div v-for="(item, index) in WineTypeList" :key="index" @click="mallClass(item, index)"
                            :class="{ mineChoseClass: index == mineAct }">
                            <div class="mineClass">{{ item.goodsTypeName }}</div>
                            <div class="mineChose"></div>
                        </div>
                    </div>
                    <div class="MallList">
                        <div class="MallItem" v-for="(item, index) in WineTypeItem" :key="index"
                            @click="chooseWineItem(item)">
                            <!-- <img :src="item.goodsImg" alt="" > -->
                            <Image :src="item.goodsImg" alt="" size="0.80" />
                            <div>{{ item.goodsName }}</div>
                        </div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                    </div>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="WineTypeIndexChange"
                        v-model:currentPage="WineTypeItemIndex" :page-size="WineTypeItemSize"
                        layout=" total, prev, pager, next, jumper" :total="toolList.length"></el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight" v-if="StorageAct == 1">
                <div class="tableTitle tabSpe">
                    <div style="font-size: 1vw; font-weight: bold;">存酒详情</div>
                    <div>桌号：<span style="font-size: 1vw; font-weight: bold; cursor: pointer;"
                            @click="choseTable('tabSelName')">
                            <span v-if="!tabSelName.name" style="color: #FF6A00;">选择桌号</span>
                            <span v-if="tabSelName.name">{{ tabSelName.name }}</span>
                        </span></div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">
                            <span v-if="!vipMemberName">手机号关联</span>
                            <span v-if="vipMemberName">{{ vipMemberName }}</span>
                        </span>
                    </div>
                    <div style="position: relative;">
                        <div>手机号码：</div>
                        <el-input class="phone-box" v-model="vipMemberMobile" placeholder="请输入手机号" maxlength="11"
                            style="width: 55%; height: 2.5vw;" @input="GetMemberInfo(vipMemberMobile)"></el-input>
                        <!-- <div @click="GetMemberInfo(vipMemberMobile)" class="GetMemberInfo" style="width: 20%;">检测</div> -->
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ USER_INFO.userName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">存酒信息</div>
                </div>
                <div class="wineSaveContent">
                    <div class="wineSaveTitle2">
                        <div>存酒名称</div>
                        <div>类型</div>
                        <div>数量(瓶)</div>
                        <div>存期(天)</div>
                        <div>操作</div>
                    </div>
                    <div class="wineSaveList overflow-y-list overflow-y-listsd">
                        <div class="wineSaveItem2  wineSaveItem2mg" v-for="(item, index) in WineItemData" :key="index">
                            <div>{{ item.goodsName }}</div>
                            <div>
                                <el-select v-model="item.bottle" placeholder="请选择" @change="onSelect(item)"
                                    style="text-align: center;" :disabled="item.storeType == '1'"
                                    :suffix-icon="IconDropDown">
                                    <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="wineSaveItemqty"><el-input v-model="item.storeQty" style="width: 4vw;"
                                    maxlength="3" @focus="onfocus(item)" ref="inputRef" @blur="onblur"
                                    @input="oninput(item)" type="number"
                                    @click="getInputType('storeQty', index)"></el-input></div>
                            <div class="wineSaveItemqdis"><el-input v-model="item.storeDay" style="width: 4vw;"
                                    type="number" @click="getInputType('storeDay', index)" disabled></el-input></div>
                            <div style="color: #00AAFF; cursor: pointer;" @click="WineItemDel(index)">删除</div>
                        </div>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <viewer class="screen-view" v-if="WineItemData.length && WineItemData.some(item => item.goodsImg)" :key="WineItemData.length">
                        <img v-for="(item, index) in WineItemData" :key="index" :src="item.goodsImg" alt="">
                        </viewer>
                </div>
                <div class="digital—continar digital—continarbt">

                    <div class="digital">
                        <div @click="Num('WineItem', '1')">1</div>
                        <div @click="Num('WineItem', '2')">2</div>
                        <div @click="Num('WineItem', '3')">3</div>
                        <div @click="Num('WineItem', '4')">4</div>
                        <div @click="Num('WineItem', '5')">5</div>
                        <div @click="Num('WineItem', '.')">·</div>
                        <div @click="Num('WineItem', '6')">6</div>
                        <div @click="Num('WineItem', '7')">7</div>
                        <div @click="Num('WineItem', '8')">8</div>
                        <div @click="Num('WineItem', '9')">9</div>
                        <div @click="Num('WineItem', '0')">0</div>
                        <div @click="numDel('WineItem')"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <div style="width: 48%;">补打存酒小票</div>
                        <!-- <div>存酒拒绝</div> -->
                        <!-- <div class="confirm" @click="OpStoreWine()" style="width: 65%;">存酒确认</div> -->
                        <el-button :loading="isLoading"   class="confirm" @click="OpStoreWine()"
                        style="width: 48%;">存酒确认</el-button>
                    </div>
                </div>
            </div>
            <!-- 手动选择存酒 end -->
        </div>
        <!-- 底部菜单 存酒 end -->
        <!-- 底部菜单 取酒 start -->
        <div class="wineContent" v-if="footerAct == '1'">
            <div class="wineBoxLeft">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">客人电话：</span>
                            <el-input v-model="TakeWineData.memberMobile" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">客户姓名：</span>
                            <el-input v-model="TakeWineData.memberName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">订台人：</span>
                            <el-input v-model="TakeWineData.maintainUserName" placeholder="请输入内容"
                                class="book-text"></el-input>
                        </div>
                        <div class="upper-item">
                            <span class="book-title">取酒码：</span>
                            <el-input v-model="TakeWineData.barCode" placeholder="请输入取酒码" class="book-text"></el-input>
                        </div>
                        <!-- <div class="upper-item"></div><div class="upper-item"></div> -->
                        <div class="btn-item">
                            <div class="btn1" @click="GetTakeWineList()">查询</div>
                            <div class="btn3" @click="resetTakeWineList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="TakeWineList.data" tooltip-effect="dark" class="book-table"
                        style="width: 100%;" @row-click="TakeWineAdd" @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column prop="memberMobile" label="客户电话" min-width="8%"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="remainQty" label="数量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="storeDate" label="存酒时间" min-width="12%" align="center"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="6%" align="center">

                            <template #default="scope">
                                <span v-if="scope.row.state == '0'">待寄存</span>
                                <span v-if="scope.row.state == '1'">已寄存</span>
                                <span v-if="scope.row.state == '2'">待领取</span>
                                <span v-if="scope.row.state == '3'">已领取</span>
                                <span v-if="scope.row.state == '4'">已过期</span>
                                <span v-if="scope.row.state == '5'">已充公</span>
                                <span v-if="scope.row.state == '9'">已拒绝</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="maintainUserName" label="存酒员" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="roomName" label="存酒桌台" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="营销员" min-width="6%"
                            align="center"></el-table-column>
                        <el-table-column prop="remark" label="备注" min-width="6%" align="center"></el-table-column>
                        <!-- <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="danger" @click="TakeWineAdd(scope.row)">添加</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="TakeWineListCurrentChange"
                        v-model:currentPage="TakeWineData.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper"
                        :total="TakeWineList.totalCount ? TakeWineList.totalCount : 0">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒详情</div>
                    <!-- <div>桌号：<span style="font-size: 1vw; font-weight: bold;">{{ TakeWineInfo.roomName }}</span></div> -->
                    <div>
                        桌号：
                        <span @click="choseTable('takeWineRoomCode')">
                            <span v-if="!takeWineRoomCode.code">选择桌号</span>
                            <span v-if="takeWineRoomCode.code">{{ takeWineRoomCode.name }}</span>
                        </span>
                    </div>
                </div>
                <div class="vipUser">
                    <div>
                        <div>存酒用户：</div>
                        <span class="frame">{{ TakeWineInfo.memberName }}</span>
                    </div>
                    <div>
                        <div>手机号码：</div>
                        <span class="frame">{{ TakeWineInfo.memberMobile }}</span>
                    </div>
                    <div>
                        <div>会员等级：</div>
                        <span>普通会员</span>
                    </div>
                    <div>
                        <div>存酒员：</div>
                        <span>{{ TakeWineInfo.maintainUserName }}</span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">取酒信息</div>
                </div>
                <div class="wineInfo">
                    <div>
                        <div>取酒名称：</div>
                        <span>{{ TakeWineInfo.goodsName }}</span>
                    </div>
                    <div>
                        <div>存酒单位：</div>
                        <span class="frame">瓶</span>
                    </div>
                    <div>
                        <div>取酒数量：</div>
                        <div class="frame frame_father"><el-input v-model="TakeWineInfo.takeQty"
                                style="width: 100%; height: 0;"
                                @input="takeInput(TakeWineInfo.remainQty, TakeWineInfo.takeQty)" type="number"
                                ref="takeView" :disabled="takeViewState" @click="getInputType('takeQty')"></el-input>
                        </div>
                    </div>
                    <div>
                        <div>剩余数量：</div>
                        <span class="frame">{{ TakeWineInfo.remainQty }}</span>
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <!-- <img :src="item" alt="" v-for="(item, index) in TakeWineInfo.attachment" :key="index"> -->
                    <viewer class="screen-view" v-if="TakeWineimgList.length > 0">
                              <img v-for="(item, index) in TakeWineimgList" :key="index" :src="item" alt="" > 
                    </viewer>
                </div>
                <div class="digital—continar">


                    <div class="digital">
                        <div @click="Num('TakeWine', '1')">1</div>
                        <div @click="Num('TakeWine', '2')">2</div>
                        <div @click="Num('TakeWine', '3')">3</div>
                        <div @click="Num('TakeWine', '4')">4</div>
                        <div @click="Num('TakeWine', '5')">5</div>
                        <div @click="Num('TakeWine', '.')">·</div>
                        <div @click="Num('TakeWine', '6')">6</div>
                        <div @click="Num('TakeWine', '7')">7</div>
                        <div @click="Num('TakeWine', '8')">8</div>
                        <div @click="Num('TakeWine', '9')">9</div>
                        <div @click="Num('TakeWine', '0')">0</div>
                        <div @click="numDel('TakeWine')"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>
                    <div class="saveHand">
                        <div>补打取酒小票</div>
                        <div class="confirm" style="width: 65%;" @click="OpTakeWine(TakeWineInfo)">确认</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部菜单 取酒 end -->
        <!-- 底部菜单 客遗回收 start -->
        <div class="wineContent" v-if="footerAct == '2'">
            <div class="wineBoxLeft" v-if="searchState">
                <!-- <div style="height: 60px;"></div> -->
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">桌号：</span>
                            <el-input v-model="RoomrecoveryData.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('RoomrecoveryData')"></el-input>
                        </div>
                        <div></div>
                        <div class="btn-item">
                            <div class="btn1" @click="GetRoomrecoveryWineList()">查询</div>
                            <div class="btn3" @click="resetRoomrecoveryWineList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="tableBox">
                    <el-table ref="multipleTable" :data="RoomrecoveryNewData.data" tooltip-effect="dark"
                        class="book-table roomData" style="width: 100%;" @row-click="chooseWineItem"
                        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"
                        header-row-class-name="tableHeaderRowClassName">

                        <el-table-column prop="roomName" label="桌号" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="memberMobile" label="客户电话" min-width="8%"
                            align="center"></el-table-column>
                        <el-table-column prop="goodsName" label="酒水名称" min-width="12%" align="center"></el-table-column>
                        <el-table-column prop="orderQty" label="数量" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="uomName" label="单位" min-width="6%" align="center"></el-table-column>
                        <el-table-column prop="orderTime" label="点单时间" min-width="12%" align="center"></el-table-column>
                        <el-table-column prop="maintainUserName" label="订台人" min-width="6%"
                            align="center"></el-table-column>
                        <!-- <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="danger" @click="chooseWineItem(scope.row)">添加2</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                </div>
                <div class="orderRecords-container-footer">
                    <el-pagination background @current-change="RoomrecoveryNewDataCurrentChange"
                        v-model:currentPage="RoomrecoveryData.pageIndex" :page-size="10"
                        layout="total, prev, pager, next, jumper" :total="RoomrecoveryNewData.totalCount">
                    </el-pagination>
                    <button class="footer-button">确定</button>
                </div>
            </div>
            <div class="wineBoxLeft" v-if="!searchState">
                <div>
                    <div class="upper-list">
                        <div class="upper-item">
                            <span class="book-title">桌号：</span>
                            <el-input v-model="RoomrecoveryData.roomName" placeholder="请输入内容" class="book-text"
                                @click="choseTable('RoomrecoveryData')"></el-input>
                        </div>
                        <div></div>
                        <div class="btn-item">
                            <div class="btn1" @click="GetRoomrecoveryWineList()">查询</div>
                            <div class="btn3" @click="resetRoomrecoveryWineList()">清空筛选</div>
                        </div>
                    </div>
                </div>

                <div class="wineMall">
                    <div class="MallTitle">
                        <div v-for="(item, index) in WineTypeList" :key="index" @click="mallClass(item, index)"
                            :class="{ mineChoseClass: index == mineAct }">
                            <div class="mineClass">{{ item.goodsTypeName }}</div>
                            <div class="mineChose"></div>
                        </div>
                    </div>
                    <div class="MallList">
                        <div class="MallItem" v-for="(item, index) in WineTypeItem" :key="index"
                            @click="chooseWineItem(item)">
                            <img v-if="item.goodsImg" :src="item.goodsImg" alt="">
                            <img v-else
                                src="https://oss.jtmckj.com/backend/OrgGoods/29f05572719a406ca8ca7d00c68ea15f.png"
                                alt="">
                            <div>{{ item.goodsName }}</div>
                        </div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                        <div class="MallItem"></div>
                    </div>
                </div>
                <!-- <div class="book-footer">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:currentPage="currentPage"
                    :page-size="100"
                    layout="  prev, pager, next, jumper"
                    :total="1000"
                ></el-pagination>
                <button class="footer-button">确定</button>
            </div> -->
            </div>
            <div class="wineBoxRight">
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">回收详情</div>
                    <!-- <div>桌号：<span style="font-size: 20px; font-weight: bold;">A10</span></div> -->
                </div>
                <div class="vipUser">
                    <div>
                        <div>桌号：</div>
                        <span class="frame" @click="choseTable('tabSelName')">
                            <span v-if="!tabSelName.name">选择桌号</span>
                            <span v-if="tabSelName.name">{{ tabSelName.name }}</span>
                        </span>
                    </div>
                    <div>
                        <div>回收人：</div>
                        <!-- <span class="frame">1888888888</span> -->
                        <span class="frame framenotbg">
                            <el-select v-model="WaiterItem" placeholder="请选择" value-key="userCode"
                                clear-icon=".elSelect" :suffix-icon="IconDropDown">
                                <el-option v-for="item in WaiterList" :key="item.userCode" :label="item.userName"
                                    :value="item"></el-option>
                            </el-select>
                        </span>
                    </div>
                </div>
                <div class="tableTitle">
                    <div style="font-size: 1vw; font-weight: bold;">回收信息</div>
                </div>
                <div class="wineSaveContent">
                    <div class="wineSaveTitle3">
                        <div>回收酒名称</div>
                        <div>类型</div>
                        <div>数量(瓶)</div>
                        <div>操作</div>
                    </div>
                    <div class="wineSaveList">
                        <div class="wineSaveItem3" v-for="(item, index) in WineItemData" :key="index">
                            <div>{{ item.goodsName }}</div>
                            <div>
                                <el-select v-model="item.bottle" placeholder="请选择" @change="onSelect(item)"
                                    :suffix-icon="IconDropDown">
                                    <el-option v-for="item in bottleOpt" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <el-input v-model="item.storeQty" style="width: 4vw;" maxlength="3"
                                    @focus="onfocus(item)" ref="inputRef" @blur="onblur" @input="oninput(item)"
                                    type="number" @click="getInputType('storeQty', index)">
                                    <div>{{ item.storeQty }}</div>
                                </el-input>
                                <!-- <el-input v-model="item.storeQty">{{ item.storeQty }}</el-input> -->
                            </div>
                            <!-- <div><el-input v-model="item.storeDay" style="width: 4vw;" type="number"></el-input></div> -->
                            <div style="color: #00AAFF; cursor: pointer;" @click="WineItemDel(index)">删除</div>
                        </div>
                        <!-- <div class="wineSaveItem3">
                        <div>福佳白200mL</div>
                        <div>
                            <el-select v-model="bottle" placeholder="请选择">
                                <el-option
                                    v-for="item in bottleOpt"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <div><el-input v-model="input" style="width: 4vw;"></el-input></div>
                        <div style="color: #00AAFF; cursor: pointer;">删除</div>
                    </div> -->
                    </div>
                </div>
                <div class="wineLogo">
                    <div>存酒照片：</div>
                    <!-- <img :src="item.goodsImg" alt="" v-for="(item, index) in WineItemData" :key="index"> -->
                       <viewer class="screen-view" v-if="WineItemData.length && WineItemData.some(item => item.goodsImg)" :key="WineItemData.length">
                        <img v-for="(item, index) in WineItemData" :key="index" :src="item.goodsImg" alt="">
                        </viewer>
                </div>
                <div class="digital—continar">
                    <div class="digital">
                        <div @click="Num('WineItem', '1')">1</div>
                        <div @click="Num('WineItem', '2')">2</div>
                        <div @click="Num('WineItem', '3')">3</div>
                        <div @click="Num('WineItem', '4')">4</div>
                        <div @click="Num('WineItem', '5')">5</div>
                        <div @click="Num('WineItem', '.')">·</div>
                        <div @click="Num('WineItem', '6')">6</div>
                        <div @click="Num('WineItem', '7')">7</div>
                        <div @click="Num('WineItem', '8')">8</div>
                        <div @click="Num('WineItem', '9')">9</div>
                        <div @click="Num('WineItem', '0')">0</div>
                        <div @click="numDel('WineItem')"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/wine/del.png" alt=""></div>
                    </div>

                    <div class="saveHand">
                        <div>补打存酒小票</div>
                        <div class="confirm" @click="OpCoveryWine()" style="width: 65%;">确认</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部菜单 客遗回收 end -->
        <!-- 底部菜单 存取酒管理 start -->
        <!-- <div style="background-color: blue; height: 500px;" v-if="footerAct == '3'">
        <div v-for="item in WineList">{{ item }}</div>
    </div> -->
        <!-- 底部菜单 存取酒管理 end -->

        <div class="footerNav">
            <div v-for="(item, index) in footerNav" :key="index" @click="fMenuChange(index)"
                :class="{ fmClass: index == footerAct }" v-has-role-show="item.role">{{ item.title }}</div>
            <!-- <div @click="test()">存取酒管理</div> -->
            <div v-has-role-show="'wine-log'"><router-link to="/wineManage" class="link">存取酒管理</router-link></div>

        </div>
    </div>

    <div>
        <el-dialog v-model="tableSelectShow" :show-close="false" width="1000px">
            <div class="tableSelect">
                <div class="tableSelect-title">选择桌台</div>
                <div style="padding: 0 4px;">
                    <div class="tableSelect-tab">
                        <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList"
                            :key="k" @click="onChangeTab('tableSelect', k)">
                            <div>{{ v.name }}</div>
                            <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                        </div>
                    </div>
                </div>

                <div class="tableSelect-main" @click="onSelectTable">
                    <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode"
                        :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">{{ v.roomName }}
                    </div>
                    <!-- <div class="tableSelect-main-item spe" data-type="up" @click="onChangePage">上页</div>
            <div class="tableSelect-main-item spe" data-type="down" @click="onChangePage">下页</div> -->
                </div>
                <div class="popup-btn" style="padding: 0 4px;">
                    <div class="btn-cancle" @click="tableSelectShow = false">取消</div>
                    <div class="btn-submit" @click="confirmSelect">确认</div>
                </div>
            </div>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="wineDayShow" :show-close="false" width="300px" title="酒水延期" center class="wineDayShow">
            <div class="DayInput">
                <div>存酒名称：</div>
                <input type="text" v-model="theStoreDetail.goodsName" disabled style="background-color: transparent;">
            </div>
            <div class="DayInput">
                <div>延期时间(天)：</div>
                <input type="text" v-model="delayDayText">
            </div>
            <div class="DayBtn">
                <div class="cancel" @click="wineDayShow = false">取消</div>
                <div class="confirm" @click="WineDelayDay()">确认</div>
            </div>
        </el-dialog>
    </div>
    <wineTableSelect v-if="wineTableSelectShow" v-model="wineTableSelectShow" :roomState="roomState"
        @cancel="wineTableSelectShow = false" @confirm="selectTable" />
</template>

<script setup>
import Api from '@/api'
import { ref } from 'vue'
import wineTableSelect from '@/views/components/wineTableSelect.vue'
import IconDropDown from "@/components/Icon/IconDropDown.vue";
import Image from "@/components/Image/Image.vue";
import ls from '@/lib/ls'
import dayjs from 'dayjs'
import { filterAndPaginateItems } from '@/lib/util.js'

import { transformWorkTime , changeWorkTime } from '@/utils/chenhao.js'
import useConfigStore from '@/store/config'
import Compressor from "compressorjs";


const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  

//获取缓存
const USER_INFO = ls.get('USER_INFO')
//桌台号
const wineTableSelectShow = ref(false)

const tableColumnWidth = ref('200')
const orderColumnWidth = ref('90')
window.addEventListener("resize", readerSize)
function readerSize() {
    console.log(window.innerWidth, 'window.innerWidth2222222');
    if (window.innerWidth >= 1200) {
        tableColumnWidth.value = '160'
    } else if (window.innerWidth >= 800 && window.innerWidth < 1200) {
        tableColumnWidth.value = '120'
    } else if (window.innerWidth >= 400 && window.innerWidth < 800) {
        tableColumnWidth.value = '40'
    }
}

const tableData = ref('')
const takeWineRoomCode = ref({})
const roomState = ref('')
const selectTable = (data) => {
    if (data.name) {
        if (tableType.value == 'WineListDatas') {
            WineListDatas.value.roomName = data.name
        } else if (tableType.value == 'RoomConsumeData') {
            RoomConsumeData.value.roomName = data.name
        } else if (tableType.value == 'tabSelName') {
            tabSelName.value.name = data.name
            tabSelName.value.code = data.code
        } else if (tableType.value == 'RoomrecoveryData') {
            RoomrecoveryData.value.roomName = data.name
        } else if (tableType.value == 'WineRecoveryRecordData') {
            WineRecoveryRecordData.value.roomName = data.name
            WineRecoveryRecordData.value.roomCode = data.code
        } else if (tableType.value == 'takeWineRoomCode') {
            takeWineRoomCode.value.name = data.name
            takeWineRoomCode.value.code = data.code
        }
        wineTableSelectShow.value = false
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }
}


const timeType = ref('0')


const tableType = ref('')
const choseTable = (type) => {
    console.log(type);
    if (type == 'takeWineRoomCode') {
        roomState.value = '2,3'
    } else {
        roomState.value = ''
    }
    wineTableSelectShow.value = true
    tableType.value = type
}

const inputRef = ref(null)
const onSelect = (i) => {
    console.log(i)
    i.storeQty = ''
    if (i.bottle == '0') {
        i.storeDay = i.notWholeStoreTimeLimit
    } else if (i.bottle == '1') {
        i.storeDay = i.storeTimeLimit
    }
}

const calcu = (i, n) => {
    i.storeQty += n
    oninput(i)
}

const oninput = (i) => {
    console.log(i)
    if (i.storeQty < 0) {
        i.storeQty = 0;
    }
    if (i.bottle == '0') {
        if (i.storeQty >= 1) {
            ElMessageBox.alert('数量必须小于1', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    i.storeQty = ''
                },
            });
        }
    } else {
        if (/\./g.test(i.storeQty) == true) {
            ElMessageBox.alert('请输入整数', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    i.storeQty = ''
                },
            });
        }
    }
}
const onfocus = (i) => {
    if (!i.bottle) {
        ElMessageBox.alert('请先选择类型', '标题', {
            confirmButtonText: '确定',
            callback: (action) => { },
        });
        inputRef.value[0].blur()
    }

}

//数据
// 日期选择器
const tableSelectShow = ref(false)
const tabSelActive = ref(0) // 选中桌台的下标
const input = ref('') // 手机号/姓名
const menuList = ["待寄存确认", "待领取确认", "存酒记录", "取酒记录", "回收记录"];
const StorageNav = ['本次消费存酒', '手动选择存酒']
const isActive = ref("0");
const bottle = ref('')
const bottleOpt = ref([
    {
        value: "1",
        label: "整瓶",
    },
    {
        value: "0",
        label: "非整瓶",
    },
]);
const stateOpt = ref([
    {
        value: "0",
        label: "待寄存",
    },
    {
        value: "1",
        label: "已寄存",
    },
    {
        value: "4",
        label: "已过期",
    },
    {
        value: "5",
        label: "已回收",
    },
    {
        value: "9",
        label: "已拒绝",
    },
]);
const stateOpt2 = ref([
    {
        value: "2",
        label: "待领取",
    },
    {
        value: "3",
        label: "已领取",
    }
]);
const menuChose = (index) => {
    footerAct.value = '-1'
    isActive.value = index;
    currentPage.value = '1'
    console.log(isActive.value);
    if (isActive.value == '0') {
        WineListDatas.value.opType = '1'
        getWineList()
    } else if (isActive.value == '1') {
        WineListDatas.value.opType = '2'
        getWineList()
    } else if (isActive.value == '2') { 
        // ??? 怎么时间用2个值
        StoreDateTemp.value = (transformWorkTime('今天', orgStartTime, orgEndTime))
        GetStoreWineRecordList()
    } else if (isActive.value == '3') { 
        // ??? 怎么时间用2个值
        TakeDateTemp.value = (transformWorkTime('今天', orgStartTime, orgEndTime))
        GetTakeWineRecordList()
    } else if (isActive.value == '4') {
        GetWineRecoveryRecordList()
    }
};
const surNum = ref("1");

// const footerNav = ["存酒", "取酒", "客遗回收", "存取酒管理"];
// const footerNav = ["存酒", "取酒", "客遗回收"];
const footerNav = [
    {
        title: '存酒',
        role: 'wine-store'
    },
    {
        title: '取酒',
        role: 'wine-take'
    },
    {
        title: '客遗回收',
        role: 'wine-recycle-lose'
    }
];
// function
const surChange = () => {
    console.log(surNum.value);
};

const footerAct = ref('-1')
const fMenuChange = (index) => {
    isActive.value = '-1'
    footerAct.value = index
    currentPage.value = '1'
    if (footerAct.value == '0') {
        // GetRoomConsumeWineList()
        GetWineTypeList()
        tabSelName.value.name = ''
        tabSelName.value.code = ''
        WineItemData.value = []
    }
    if (footerAct.value == '1') {
        GetTakeWineList()
    }
    if (footerAct.value == '2') {
        // GetRoomConsumeWineList()
        GetWineTypeList()
        tabSelName.value.name = ''
        tabSelName.value.code = ''
        WaiterItem.value = ''
        searchState.value = false
        WineItemData.value = []
    }
    if (footerAct.value == '3') {
        ElMessageBox.alert('操作成功', '标题', {
            confirmButtonText: '确定',
            callback: (action) => {
                return
            },
        });
    }
};

const StorageAct = ref('0')
const StorageChage = (index) => {
    StorageAct.value = index
    tabSelName.value = { name: '', code: '' }
    vipMemberName.value = ''
    vipMemberMobile.value = ''
    // WineItemData.value = []
}

// const MallTitle = ['全部','红酒','洋酒','白酒','啤酒','气泡酒']
const WineTypeItemLength = ref(0)
const toolList = ref([])
const mineAct = ref('0')
const WineTypeItem = ref('')
const WineTypeItemIndex = ref(1)
const WineTypeItemSize = ref(12)
const mallClass = (item, index) => {
    mineAct.value = index
    toolList.value = item.goodsList.filter(it => it.isMinUom == '1')
    WineTypeItemLength.value = toolList.value.length
    console.log(WineTypeItem.value);

    WineTypeItem.value = filterAndPaginateItems(toolList.value, WineTypeItemIndex.value, WineTypeItemSize.value)

}
const WineTypeIndexChange = (e) => {
    console.log(e);
    WineTypeItemIndex.value = e
    WineTypeItem.value = filterAndPaginateItems(toolList.value, WineTypeItemIndex.value, WineTypeItemSize.value)
}


// 获取待寄存列表
const WineList = ref([])
const WineListDatas = ref({ "roomName": "", "maintainUserName": "", "orderUserMobile": "", "isFull": "", 'pageSize': '10', 'pageIndex': '1', 'opType': '1' })
const getWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetStoreWineList", "orgCode": "0004", "contentData": WineListDatas.value })
        .then(res => {
            WineList.value = res
            console.log(res)
        })
}
// --------------------------------------------------- 分页 ---------------------------------------------------------------
const currentPage = ref(1)
const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`)
}
const WineListCurrentChange = (val) => {
    WineListDatas.value.pageIndex = val
    getWineList()
}
const WineRecordListCurrentChange = (val) => {
    WineRecordData.value.pageIndex = val
    GetStoreWineRecordList()
}
const TakeWineRecordListCurrentChange = (val) => {
    TakeWineRecordData.value.pageIndex = val
    GetTakeWineRecordList()
}
const RoomConsumeNewDataCurrentChange = (val) => {
    RoomConsumeData.value.pageIndex = val
    GetRoomConsumeWineList()
}
const TakeWineListCurrentChange = (val) => {
    TakeWineData.value.pageIndex = val
    GetTakeWineList()
}
const RoomrecoveryNewDataCurrentChange = (val) => {
    RoomrecoveryData.value.pageIndex = val
    GetRoomrecoveryWineList()
}
const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`)
    WineListDatas.value.pageIndex = val
    WineRecordData.value.pageIndex = val
    TakeWineData.value.pageIndex = val
    getWineList()
    GetStoreWineRecordList()
    GetTakeWineList()
}

const WineRecoveryRecordListCurrentChange = (val)=> {
    WineRecoveryRecordData.value.pageIndex = val
    WineRecoveryRecordData.value.pageSize = 10
    GetWineRecoveryRecordList()
}

// 清空筛选
const resetWineList = (type) => {
    WineListDatas.value = { "roomName": "", "maintainUserName": "", "orderUserMobile": "", "isFull": "", 'pageSize': '10', 'pageIndex': '1', 'opType': type }
    getWineList()
}
// 酒水延期
const wineDayShow = ref(false)
const delayDayText = ref('')
const wineDayShowDialog = () => {
    if (!theStoreDetail.value) {
        alert('未选择酒水信息')
    } else {
        wineDayShow.value = true
        delayDayText.value = ''
    }
}
const WineDelayDay = () => {
    let contentData = {
        code: theStoreDetail.value.code,
        delayDay: delayDayText.value
    }
    Api.Common.PcObjProcess.Do({ functionName: "OpStoreWineDelayDay", orgCode: "0004", contentData })
        .then(async res => {
            wineDayShow.value = false
            alert(res.result)
            await GetStoreWineRecordList()
            let newDay = theStoreDetail.value.keepTime.split('天')[0]
            theStoreDetail.value.keepTime = JSON.stringify(parseInt(newDay) + parseInt(delayDayText.value)) + '天'
            checkStoreDetail(theStoreDetail.value)
        })
}
const resetWineRecordList = () => {
    WineRecordData.value = { 'memberMobile': '', 'goodsName': '', 'beginStoreDate': '', 'endStoreDate': '', 'beginExpireDate': '', 'endExpireDate': '', 'isFull': '', 'state': '', 'maintainUserName': '', 'pageSize': '7', 'pageIndex': '1' }
    StoreDateTemp.value = []
    // ref(transformWorkTime('今天', orgStartTime, orgEndTime)) 
    ExpireDateTemp.value = ''
    GetStoreWineRecordList()
}
const resetTakeWineRecordList = () => {
    TakeWineRecordData.value = { memberMobile: '', goodsName: '', beginTakeDate: '', endTakeDate: '', isFull: '', state: '', pageIndex: "1", pageSize: "10" }
    TakeDateTemp.value = [] // transformWorkTime('今天', orgStartTime, orgEndTime)
    GetTakeWineRecordList()
}
// 待寄存 添加
const wineItem = ref('')
const wineItemCopy = ref('')
const wineItemList = ref([])
const wineItemAdd = (row) => {
    wineItem.value = row
    console.log(wineItem.value)
}
const wineItemAdds = (row) => {
    console.log(row,'chakdasd---------')
    wineItem.value = row
    wineItemCopy.value = JSON.parse(JSON.stringify(row))
    if (row.attachment) {
        // 分割字符串以获取每个URL
        const urls = row.attachment.split(',');
        // 创建一个数组来存储URLs
        const imageUrls = urls.map(url => url.trim());
        wineItemList.value = imageUrls
    } else {
        wineItemList.value = []
    }
}

const isLoading  = ref(false)

//待寄存存酒确认/拒绝
const wineState = (item, opType, type) => {
    console.log(item);

    if (type == 'save') {
        isLoading.value = true; 
        
        const WineStateData = ref({ "code": item.code, "currentQty": wineItemCopy.value.remainQty, "opType": opType ,"goodsName":wineItemCopy.value.goodsName})
        Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWineState", "orgCode": "0004", "contentData": WineStateData.value })
            .then(res => {
                ElMessageBox.alert('操作成功', '标题', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        wineItem.value = ''
                        isLoading.value = false; 
                        getWineList()
                    },
                });
            }).catch(err => {
                isLoading.value = false; 
                ElMessageBox.alert('操作失败', '标题', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        getWineList()
                    },
                });
            })
    } else if (type == 'take') {
        const WineStateData = ref({ "code": item.code, "takeQty": item.takenQty, "opType": opType })
        Api.Common.PcObjProcess.Do({ "functionName": "OpTakeWineState", "orgCode": "0004", "contentData": WineStateData.value })
            .then(res => {
                ElMessageBox.alert('操作成功', '标题', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        wineItem.value = ''
                        getWineList()
                    },
                });
            }).catch(err => {
                ElMessageBox.alert('操作失败', '标题', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        getWineList()
                    },
                });
            })
    }

}
//补打存酒小票
const PrintStoreWine = (code) => {
    Api.Common.PcObjProcess.Do({ "functionName": "RePrintStoreWine", "orgCode": "0004", "contentData": { "code": code } })
        .then(res => {
            console.log(res)
        })
}
//补打取酒小票
const RePrintWineTake = (code) => {
    Api.Common.PcObjProcess.Do({ "functionName": "RePrintWineTake", "orgCode": "0004", "contentData": { "code": code } })
        .then(res => {
            console.log(res)
        })
}
//时间转换年月日
const dateChange = (newDate) => {
    const timestamp = newDate
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; //月份是从0开始的，所以要加1
    const day = date.getDate();
    const result = year + '-' + month + '-' + day;
    console.log(result); // 输出：2021-01-01
    return result
}
//获取存酒记录
const WineRecordList = ref([])
const WineRecordData = ref({ 'memberMobile': '', 'goodsName': '', 'beginStoreDate': '', 'endStoreDate': '', 'beginExpireDate':  '', 'endExpireDate': '', 'isFull': '', 'state': '', 'maintainUserName': '', 'pageSize': '8', 'pageIndex': '1' })
const StoreDateTemp = ref(transformWorkTime('今天', orgStartTime, orgEndTime))
const ExpireDateTemp = ref('')

const getStoreDate = (e) => {
    // WineRecordData.value.beginStoreDate = dateChange(e[0])
    // WineRecordData.value.endStoreDate = dateChange(e[1])
}
const getExpireDate = (e) => {
    
    // WineRecordData.value.beginExpireDate =  dayjs(ExpireDateTemp.value[0]).format('YYYY-MM-DD HH:mm:ss')
    // WineRecordData.value.endExpireDate = dayjs(ExpireDateTemp.value[1]).format('YYYY-MM-DD HH:mm:ss')
    
}
const GetStoreWineRecordList = () => {
    console.log(ExpireDateTemp.value);
    console.log(StoreDateTemp.value);
    
    let timeArr = changeWorkTime(timeType.value,StoreDateTemp.value[0],StoreDateTemp.value[1],orgStartTime,orgEndTime)
    let timeArr1 = changeWorkTime(timeType.value,ExpireDateTemp.value[0],ExpireDateTemp.value[1],orgStartTime,orgEndTime)
    WineRecordData.value.beginStoreDate =  timeArr[0]
    WineRecordData.value.endStoreDate = timeArr[1]
    WineRecordData.value.beginExpireDate = timeArr1[0]
    WineRecordData.value.endExpireDate = timeArr1[1]

    Api.Common.PcObjProcess.Do({ "functionName": "GetStoreWineRecordList", "contentData": WineRecordData.value })
        .then(res => {
            WineRecordList.value = res
            console.log(WineRecordList.value, '看看看-----------')
        })
}
//存酒记录-查看明细
const theStoreDetail = ref('')
const CjimgUrls = ref([])
const checkStoreDetail = (row) => {
    if (row.attachment) {
        // 分割字符串以获取每个URL
        const urls = row.attachment.split(',');
        // 创建一个数组来存储URLs
        const imageUrls = urls.map(url => url.trim());
        CjimgUrls.value = imageUrls
    } else {
        CjimgUrls.value = []
    }
    theStoreDetail.value = row
}
const checkStoreDetailJ = (row) => {
    console.log(row)
    // theStoreDetail.value = row
    TakeWineRecordData.value = {
        pageIndex: "1", pageSize: "10", storeCode: row.code
    }
    GetTakeWineRecordList()
    isActive.value = '3'
    // GetTakeWineRecordList()

}

//取酒记录
const TakeWineRecordList = ref('')
const TakeWineRecordData = ref({ memberMobile: '', goodsName: '', beginTakeDate: '', endTakeDate: '', isFull: '', state: '', pageIndex: "1", pageSize: "10" })
const TakeDateTemp = ref(transformWorkTime('今天', orgStartTime, orgEndTime)) 
const getTakeDate = (e) => {
    // TakeWineRecordData.value.beginTakeDate = dateChange(e[0])
    // TakeWineRecordData.value.endTakeDate = dateChange(e[1])
}
const GetTakeWineRecordList = () => {

    let timeArr = changeWorkTime(timeType.value,TakeDateTemp.value[0] ,TakeDateTemp.value[1],orgStartTime,orgEndTime)

    TakeWineRecordData.value.beginTakeDate = timeArr[0]
    TakeWineRecordData.value.endTakeDate = timeArr[1]

    Api.Common.PcObjProcess.Do({ "functionName": "GetTakeWineRecordList", "orgCode": "0004", "contentData": TakeWineRecordData.value }).then(res => {
        console.log(res)
        TakeWineRecordList.value = res
    })
}

//取酒记录-查看明细
const theTakeDetail = ref('')
const theTakeImg = ref([])
const checkTakeDetail = (row) => {
    theTakeDetail.value = row

    if (row.attachment) {
        // 分割字符串以获取每个URL
        const urls = row.attachment.split(',');
        // 创建一个数组来存储URLs
        const imageUrls = urls.map(url => url.trim());
        theTakeImg.value = imageUrls
    } else {
        theTakeImg.value = []
    }
}


//存酒 - 本次消费存酒
const RoomConsumeData = ref({ "roomName": "", "orderUserMobile": "", "maintainUserName": "" })
const RoomConsumeNewData = ref('')
const GetRoomConsumeWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetRoomConsumeWineList", "orgCode": "0004", "contentData": RoomConsumeData.value })
        .then(res => {
            RoomConsumeNewData.value = res
            console.log(res)
        })
}
const resetRoomConsumeWineList = () => {
    RoomConsumeData.value = { "roomName": "", "orderUserMobile": "", "maintainUserName": "" }
    GetRoomConsumeWineList()
}
//存酒 - 添加
const RoomConsumeList = ref([])
const RoomConsumeItem = ref('')
const RoomConsumeAdd = (row) => {
    if (row.orderQty > 0) {
        RoomConsumeItem.value = row
        RoomConsumeItem.value.bottle = '1'
        RoomConsumeItem.value.storeQty = '1'
        RoomConsumeItem.value.storeDay = RoomConsumeItem.value.storeTimeLimit
        RoomConsumeList.value.push(JSON.parse(JSON.stringify(RoomConsumeItem.value)))
        if (!OpStoreWineData2.value.memberMobile) {
            OpStoreWineData2.value.memberMobile = RoomConsumeItem.value.memberMobile
        }
        console.log(RoomConsumeList.value)
    }
}

//存酒- 获取酒水分类
const WineTypeList = ref('')
const GetWineTypeList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetWineTypeList", "orgCode": "0004", "contentData": {} })
        .then(res => {
            console.log(res.result)
            WineTypeList.value = res.result
            if (!WineTypeItem.value) {
                WineTypeItem.value = res.result[0].goodsList.filter(it => it.isMinUom == '1')
            }
        })
}

//手动存酒 添加酒水
const WineItemData = ref([])
const chooseWineItem = (i) => {
    let newData = {
        bottle: '1',
        storeQty: '1',
        storeDay: i.storeTimeLimit
    }

    Object.assign(i, newData)
    WineItemData.value.push(JSON.parse(JSON.stringify(i)))
    console.log(WineItemData.value)
}

// 获取房台类型
const zoneList = ref('')
const getTableType = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "contentData": { "parentCode": "101" }, "orgCode": "0004" })
        .then(res => {
            let newArray = [{ code: '', name: '全部' }]
            Array.prototype.push.apply(newArray, res.result)
            zoneList.value = newArray
        })
}

// 获取房台
const usePostForm = ref({
    reserveTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    roomState: '',
    typeCode: '',
    pageSize: 38,
    pageIndex: 1
})
const freeTableList = ref([])
const getCanUseTables = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": usePostForm.value })
        .then(res => {
            freeTableList.value = res.result[0].areaRooms
            console.log(freeTableList.value);
        })
}

const tabSelName = ref({
    name: '',
    code: ''
})
const confirmSelect = (e) => {
    //   tableSelectShow.value = false
    console.log(tabSelName.value)
}

// 桌台选中切换
const onSelectTable = (e) => {
    console.log(e.target.dataset);
    if (e.target.dataset.id) {
        tabSelActive.value = e.target.dataset.id
        tabSelName.value.name = e.target.dataset.name
        tabSelName.value.code = e.target.dataset.code
    }
}

// 上下页切换
const onChangePage = (e) => {
    if (e.target.dataset.type == 'down') {
        if (freeTableList.value.length >= 1) {
            console.log(freeTableList.value.length)
            usePostForm.value.pageIndex++
        }
    } else {
        if (freeTableList.value.length >= 1) {
            console.log(freeTableList.value.length)
            usePostForm.value.pageIndex--
        }
    }
    getCanUseTables()
}

//回收选择桌号

const recTabShow = () => {
    tableSelectShow.value = true
    getTableType()
    getCanUseTables()
}

//存酒选择桌号

const tabShow = () => {
    tableSelectShow.value = true
    getTableType()
    getCanUseTables()
}

//会员查询
const vipMemberMobile = ref('')
const vipMemberName = ref('')
const GetMemberInfo = (Mobile) => {
    if (Mobile.length == 11) {
        Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": vipMemberMobile.value } })
            .then(res => {
                console.log(res.name);
                vipMemberName.value = res.name
            })
    } else {
        vipMemberName.value = ''
    }
}

const getRoomConsumeMobile = (Mobile) => {
    if (Mobile.length == 11) {
        Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": OpStoreWineData2.value.memberMobile } })
            .then(res => {
                console.log(res.name);
                RoomConsumeItem.value.memberName = res.name
            })
    } else {
        RoomConsumeItem.value.memberName = ''
    }
}

//手动选择存酒 - 存酒确认
const OpStoreWineData = ref({
    memberMobile: '',
    roomCode: '',
    images: "",
    consumeCode: "",
    remark: "",
    goods: []
})
const OpStoreWine = () => {
    OpStoreWineData.value.memberMobile = vipMemberMobile.value
    OpStoreWineData.value.roomCode = tabSelName.value.code
    OpStoreWineData.value.goods = JSON.stringify(WineItemData.value)
    isLoading.value = true
    console.log(OpStoreWineData.value)
    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWine", "orgCode": "0004", "contentData": OpStoreWineData.value })
        .then(res => {
            console.log(res);
            resetParameters()
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {

                    getWineList()

                },
            });
            isLoading.value = false
        }).catch(err=> {
            isLoading.value = false
        })
}
//预约确认后重置
const resetParameters = () => {
    WineItemData.value = []
    tabSelName.value.name = ''
    tabSelName.value.code = ''
    vipMemberMobile.value = ''
    vipMemberName.value = ''
}
//本次消费存酒 - 存酒确认
const OpStoreWineData2 = ref({
    memberMobile: '',
    roomCode: '',
    images: '',
    consumeCode: '',
    remark: '',
    goods: [],
    images: ''
})
const OpStoreWine2 = (i) => {
    // urlPathList
    OpStoreWineData2.value.roomCode = i[0].roomCode
    OpStoreWineData2.value.consumeCode = i[0].consumeCode,
        OpStoreWineData2.value.images = urlPathList.value.toString()
    OpStoreWineData2.value.goods = []
    console.log(i)
    // let tempData = {
    //     goodsCode: '',
    //     goodsName: '',
    //     uomCode: '',
    //     uomName: '',
    //     storeQty: '',
    //     storeDay: ''
    // }
    i.map(e => {
        // tempData.goodsCode = e.goodsCode
        // tempData.goodsName = e.goodsName
        // tempData.uomCode = e.uomCode
        // tempData.uomName = e.uomName
        // tempData.storeQty = e.storeQty
        // tempData.storeDay = e.storeDay
        OpStoreWineData2.value.goods.push(e)
    })
    console.log(OpStoreWineData2.value.goods);
    OpStoreWineData2.value.goods.forEach(item => {
        if (item.storeQty <= 0) {
            ElMessage.error('存酒数量不能为空')
            throw new Error('存酒数量不能为空')
        }
    })

    OpStoreWineData2.value.goods = JSON.stringify(OpStoreWineData2.value.goods)
    console.log(OpStoreWineData2.value);
     
    isLoading.value = true
    // console.log(JSON.stringify(OpStoreWineData2.value.goods))
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "OpStoreWine", "orgCode": "0004", "contentData": OpStoreWineData2.value })
        .then(res => {
            RoomConsumeList.value = []
            OpStoreWineData2.value.memberMobile = ''
            RoomConsumeItem.value.roomName = ''
            getRoomConsumeMobile('')
            console.log(res);
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
            isLoading.value = false
        }).catch(err=> {
            isLoading.value = false
        })
}

// 获取取酒列表
const TakeWineList = ref('')
const TakeWineData = ref({ memberMobile: '', memberName: '', maintainUserName: '', pageSize: '10', pageIndex: '1' })
const GetTakeWineList = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetTakeWineList", "orgCode": "0004", "contentData": TakeWineData.value })
        .then(res => {
            TakeWineList.value = res
            console.log(TakeWineList.value)
        })
}

const resetTakeWineList = () => {
    TakeWineData.value = { memberMobile: '', memberName: '', maintainUserName: '', pageSize: '10', pageIndex: '1' }
    GetTakeWineList()
}

// 取酒操作
const takeView = ref(null)
const takeViewState = ref(false)

const TakeWineInfo = ref('')
const TakeWineimgList = ref('')
const TakeWineAdd = (row) => {
    console.log(row.attachment)
    // if (typeof (row.attachment) == 'string') {
    //     row.attachment = row.attachment.split(',')
    // } else {
    //     row.attachment = ''
    // }

    if (row.attachment) {
        // 分割字符串以获取每个URL
        const urls = row.attachment.split(',');
        // 创建一个数组来存储URLs
        const imageUrls = urls.map(url => url.trim());
        TakeWineimgList.value = imageUrls
    } else {
        TakeWineimgList.value = []
    }

    TakeWineInfo.value = row
    console.log(TakeWineInfo.value,'TakeWineInfo.value')

    let a = { takeQty: '' }
    Object.assign(TakeWineInfo.value, a)
    console.log(TakeWineInfo.value)
    if (TakeWineInfo.value.remainQty < 1) {
        takeViewState.value = true
        TakeWineInfo.value.takeQty = TakeWineInfo.value.remainQty
    } else {
        takeViewState.value = false
    }
}

const takeInput = (remain, take) => {
    if (Number(remain) < Number(take)) {
        ElMessageBox.alert('取酒数量不能大于库存', '标题', {
            confirmButtonText: '确定',
            callback: (action) => {
                TakeWineInfo.value.takeQty = TakeWineInfo.value.remainQty
            },
        });
    }
    if (Number(take) >= 1) {
        if ((parseInt(Number(take), 10) === Number(take)) == false) {
            ElMessageBox.alert('请输入整数', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    TakeWineInfo.value.takeQty = ''
                },
            });
        }
    }
}

// 取酒确认按钮

// const OpTakewineData = ref({"memberMobile":"","roomCode":"","storeCode":"","takeQty":""})
const OpTakeWine = (wineInfo) => {
    let OpTakewineData = {
        "memberMobile": wineInfo.memberMobile,
        "roomCode": takeWineRoomCode.value.code,
        "storeCode": wineInfo.code,
        "takeQty": wineInfo.takeQty
    }
    console.log(OpTakewineData)
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "OpTakeWine", "orgCode": "0004", "contentData": OpTakewineData })
        .then(res => {
            console.log(res)
            TakeWineInfo.value = ''
            takeWineRoomCode.value = {}
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    TakeWineInfo.value.takeQty = ''
                },
            });
            GetTakeWineList()
        })
}

// 获取服务员列表
const WaiterItem = ref('')
const WaiterList = ref([])

const getWaiterList = () => {
    if (WaiterList.value.length == 0) {
        Api.Common.PcObjProcess.Do({ "functionName": "getWaiterList", "contentData": "" })
            .then(res => {
                console.log('服务员列表', res.result)
                WaiterList.value = res.result
            })
    }
}

// 回收酒水操作
const CoveryWineData = ref({ "roomCode": "", "images": "", "coveryUserCode": "", "coveryUserName": "", "goods": "[]", "operType": "2" })
const OpCoveryWine = () => {
    CoveryWineData.value.roomCode = tabSelName.value.code
    CoveryWineData.value.coveryUserCode = WaiterItem.value.userCode
    CoveryWineData.value.coveryUserName = WaiterItem.value.userName
    WineItemData.value.map(e => {
        let w = { recoveryQty: '' }
        w.recoveryQty = e.storeQty
        Object.assign(e, w)
        console.log(e)
        if (e.bottle == '1') {
            e.type = '2'
        } else {
            e.type = '1'
        }
    })
    console.log(WineItemData.value);
    //  bottle
    console.log(CoveryWineData.value.goods);

    CoveryWineData.value.goods = JSON.stringify(WineItemData.value)
    // WineItemData.value

    Api.Common.PcObjProcess.Do({ "functionName": "OpCoveryWine", "orgCode": "0004", "contentData": CoveryWineData.value })
        .then(res => {
            WineItemData.value = []
            tabSelName.value = {}
            WaiterItem.value = ''
            console.log(res.result)
            ElMessageBox.alert('操作成功', '标题', {
                confirmButtonText: '确定',
                callback: (action) => {
                    getWineList()
                },
            });
        })
}


//客遗回收查询
const searchState = ref(false)
const RoomrecoveryData = ref({ "roomName": "", "memberMobile": "", "maintainUserName": "" })
const RoomrecoveryNewData = ref('')
const GetRoomrecoveryWineList = () => {
    tabSelName.value.name = ''
    tabSelName.value.code = ''
    WaiterItem.value = ''
    WineItemData.value = []
    searchState.value = true
    console.log(searchState.value)
    Api.Common.PcObjProcess.Do({ "functionName": "GetRoomConsumeWineList", "orgCode": "0004", "contentData": RoomrecoveryData.value })
        .then(res => {
            RoomrecoveryNewData.value = res
            console.log(res)
        })
}

const resetRoomrecoveryWineList = () => {
    RoomrecoveryData.value = { "roomName": "", "memberMobile": "", "maintainUserName": "" }
    GetRoomrecoveryWineList()
}

const test = () => {
    window.open('https://jtmckj.com:8080/#/login')
}

const WineItemDel = (i) => {
    WineItemData.value.splice(i, 1)
}

const RoomConsumeDel = (i) => {
    RoomConsumeList.value.splice(i, 1)
}

const tableRowClassName = ({ row, rowIndex }) => {
    // console.log(row)
    if (row.isFull == 1) {
        return 'warning-row'
    }
    return ''
    // if (rowIndex === 1) {
    //   return 'warning-row'
    // } else if (rowIndex === 3) {
    //   return 'success-row'
    // }
    // return ''
}

// 数字输入
const showDig = ref('')
const Digstate = ref('')
const typeIndex = ref('')
const typeState = ref('')
const getInputType = (type, index) => {
    typeState.value = type
    console.log(typeState.value)
    typeIndex.value = index
}

//瓶子数量
const Num = (type, num) => {
    if (type == 'RoomConsume') {
        if (typeState.value == 'storeQty') {
            if (RoomConsumeList.value[typeIndex.value].storeQty.length < 3) {
                RoomConsumeList.value[typeIndex.value].storeQty += num
            } else {
                alert('超出数量上限')
            }
        } else {
            if (RoomConsumeList.value[typeIndex.value].storeDay.length < 3) {
                RoomConsumeList.value[typeIndex.value].storeDay += num
            } else {
                alert('超出数量上限')
            }
        }
    } else if (type == 'WineItem') {
        if (typeState.value == 'storeQty') {
            if (WineItemData.value[typeIndex.value].storeQty.length < 3) {
                WineItemData.value[typeIndex.value].storeQty += num
            } else {
                alert('超出数量上限')
            }
        } else {
            if (WineItemData.value[typeIndex.value].storeDay.length < 3) {
                WineItemData.value[typeIndex.value].storeDay += num
            } else {
                alert('超出数量上限')
            }
        }
    } else if (type == 'TakeWine') {
        TakeWineInfo.value.takeQty += num
    }
}

const numDel = (type) => {
    if (type == 'RoomConsume') {
        if (typeState.value == 'storeQty') {
            RoomConsumeList.value[typeIndex.value].storeQty = RoomConsumeList.value[typeIndex.value].storeQty.slice(0, RoomConsumeList.value[typeIndex.value].storeQty.length - 1)
        } else {
            RoomConsumeList.value[typeIndex.value].storeDay = RoomConsumeList.value[typeIndex.value].storeDay.slice(0, RoomConsumeList.value[typeIndex.value].storeDay.length - 1)
        }
    } else if (type == 'WineItem') {
        if (typeState.value == 'storeQty') {
            WineItemData.value[typeIndex.value].storeQty = WineItemData.value[typeIndex.value].storeQty.slice(0, WineItemData.value[typeIndex.value].storeQty.length - 1)
        } else {
            WineItemData.value[typeIndex.value].storeDay = WineItemData.value[typeIndex.value].storeDay.slice(0, WineItemData.value[typeIndex.value].storeDay.length - 1)
        }
    }
}

const tableSelectActive = ref(0) // 选中桌台类型的下标

const onChangeTab = (type, k, v) => {
    switch (type) {
        case 'consult':
            consultActive.value = k
            console.log(consultActive.value)
            break
        case 'zone':
            zoneActive.value = k
            postForm.value.typeCode = zoneList.value[k].code
            getTableInfo()
            break
        case 'time':
            timeActive.value = k
            postForm.value.reserveTime = timeList.value[k].value
            currentTime.value = timeList.value[k].value
            getTableInfo()
            break
        case 'type':
            typeActive.value = k
            console.log(typeList.value[k].state);
            postForm.value.roomState = typeList.value[k].state
            getTableInfo()
            break
        case 'popup':
            if (v) {
                popupTitle.value = v
                console.log(popupTitle.value);
                popupActive.value = k
                if (popupTitle.value == '操作记录') {
                    // 获取操作记录
                    getRoomOpeHistory()
                }
            }
            break
        case 'popup-time':
            recordsTimeActive.value = k
            console.log(recordsTimeList.value[k]);
            recordForm.value.stratDate = recordsTimeList.value[k].startTime
            recordForm.value.endDate = recordsTimeList.value[k].endTime
            getRoomOpeHistory()
            break
        case 'tableSelect':
            tableSelectActive.value = k
            usePostForm.value.typeCode = zoneList.value[k].code
            getCanUseTables()
            break

    }

}


const compressImage = async file => {
    if (!file) {
      return;
    }
    return new Promise((reslove, reject) => {
      // compressorjs 默认开启 checkOrientation 选项
      // 会将图片修正为正确方向
      new Compressor(file, {
        quality: 0.6, // 设置压缩质量，范围从 0 到 1，默认0.8
        maxWidth: 1000,
        maxHeight: 1000,
        convertSize: 1000000,
        checkOrientation: true, // 启用 EXIF 方向修正
        success(result) {
          const compressedImage = new File([result], result.name, { type: result.type });
          reslove(compressedImage);
        },
        error(err) {
          reject(err.message);
        },
      });
    });
  }

const images = ref([]);
const urlPathList = ref([])
const handleFiles = async (event)=> {
    const files = event.target.files;
    console.log(files)
    for (let i = 0; i < files.length; i++) {
        // 检查文件类型
        if (!files[i].type.startsWith('image/')) {
            continue;
        }
        const reader = new FileReader();
        reader.onload = (e) => {
            images.value.push(e.target.result);
        };
        reader.readAsDataURL(files[i]);
        let formData = {
            file: files[i]
        }
        console.log(formData);
            // 如果是一次多张上传
        if (Array.isArray(formData)) {
            formData.forEach(async item => {
            item.file = await compressImage(item.file);
            });
        } else {
            // 单文件上传
            formData.file = await compressImage(formData.file);
        }
        Api.Common.UploadPosWine.FileDo(formData).then(res => {
            console.log(res.urlPath)
            urlPathList.value.push(res.urlPath)
        })
    }
}

// 客遗回收列表
const WineRecoveryRecordList = ref('')
const WineRecoveryRecordData = ref({
    roomName: '',
    roomCode: '',
    pageSize: '',
    pageIndex: '',
    goodsName: '',
    beginRecoveryDate: '',
    endRecoveryDate: '',
    recoveryUser: '',
    operType: '',
    // 回收类型 0：空瓶 1：非整瓶 2:整瓶
})
const recoveryTypeList = ref([
    {
        value: "0",
        label: "空瓶",
    },
    {
        value: "2",
        label: "整瓶",
    },
    {
        value: "1",
        label: "非整瓶",
    },
])
const recycleOperType = ref([
    {
        value: "0",
        label: "空瓶回收",
    },
    {
        value: "1",
        label: "过期回收",
    },
    {
        value: "2",
        label: "客遗回收",
    },
])
const GetWineRecoveryRecordList = () => {
   
    let timeArr = changeWorkTime(timeType.value,WineRecoveryRecordData.value.beginRecoveryDate,WineRecoveryRecordData.value.endRecoveryDate,orgStartTime,orgEndTime)

    WineRecoveryRecordData.value.beginRecoveryDate = timeArr[0]
    WineRecoveryRecordData.value.endRecoveryDate = timeArr[1]

    Api.Common.PcObjProcess.Do({ functionName: 'GetWineRecoveryRecordList', contentData: WineRecoveryRecordData.value })
        .then(res => {
            WineRecoveryRecordList.value = res
        })
}

const RecoveryDetail = ref('')
const RecoveryImg = ref([])
const checkRecoveryDetail = (row) => {
    console.log(row)
    if (row.attachment) {
        // 分割字符串以获取每个URL
        const urls = row.attachment.split(',');
        // 创建一个数组来存储URLs
        const imageUrls = urls.map(url => url.trim());
        RecoveryImg.value = imageUrls
    } else {
        RecoveryImg.value = []
    }
    RecoveryDetail.value = row
   
}
// getTakeDate
const RecoveryDateTemp = ref('')
const getRecoveryDate = (e) => {
    WineRecoveryRecordData.value.beginRecoveryDate = dateChange(e[0])
    WineRecoveryRecordData.value.endRecoveryDate = dateChange(e[1])
}

const resetWineRecoveryRecordList = () => {
    RecoveryDateTemp.value = ''
    WineRecoveryRecordData.value = {
        roomName: '',
        roomCode: '',
        pageSize: '',
        pageIndex: '',
        goodsName: '',
        beginRecoveryDate: '',
        endRecoveryDate: '',
        recoveryUser: '',
        recoveryType: ''
    }
    GetWineRecoveryRecordList()
}

//审核操作
const opcoveWineState = (code,type,sb) => {
    let params = null
    if(sb == 'cx') {
        params = {
            "coveryCode":code,
             "optype": type 
        }
    } else {
        params = {
            "coveryCode":code,
             "state": type 
        }
    }
    Api.Common.PcObjProcess.Do({ functionName: 'OpCoveryWineState', contentData: params }).then(res => {
            ElNotification({
                title: '提示',
                message: '操作成功',
                type: 'success',
            })
             GetWineRecoveryRecordList()
     })
}

const takewinFlag = ref(false)
const getMenutakeState = ()=> {
    const userRoleALL = ls.get('USER_ROLE_ALL')
    const userRole = userRoleALL.map(item => item.name);  
    console.log(userRole,'userRole')
    if (userRole.includes('wine-modify-info')) { 
        takewinFlag.value = true
    }
}
// ------------------------------------------------ 初始化 --------------------------------------------------------
const onInit = async () => {
    getWineList() // 获取待寄存列表
    getWaiterList()
    getMenutakeState()
}
onInit()
</script>

<style>
.el-table .warning-row {
    /* background-color: #FFFBE5 !important; */
}

.el-table .success-row {
    --el-table-tr-background-color: var(--el-color-success-lighter);
}
</style>

<style scoped lang="scss">
@import '@/styles/com_style_input.css';

:deep(.upper-item .el-input__wrapper) {
    height: 48px !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid #E6E6E6;
    box-shadow: none !important;
}

:deep(.below-item .el-select__wrapper) {
    height: 48px !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid #E6E6E6;
    box-shadow: none !important;
}

* {
    font-size: 16px;
}

:deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

:deep input[type="number"] {
    -moz-appearance: textfield;
}

:deep .wineDayShow {
    border-radius: 10px;

    .DayInput {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;

        input {
            background-color: #F9F9F9;
            color: #212121;
            width: 60%;
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 8px;
        }
    }

    .DayBtn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        div {
            width: 45%;
            text-align: center;
            padding: 10px 0;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid #FF6A00;
        }

        .cancel {
            color: #FF6A00;
        }

        .confirm {
            background-color: #FF6A00;
            color: #fff;
        }
    }
}

.wineContent {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.wineBoxLeft {
    width: 67%;
    // min-height: 600px;
    margin-top: 50px;
}

.wineBoxRight {
    position: relative;
    width: 31.5%;
    min-height: 800px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px 20px;
    padding-bottom: 30px;
    border-radius: 10px;
}

.wineMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    background-color: #e6e6e6;
    border-radius: 5px;
    padding: 10px 0 3px 0;
    width: 67%;

    >div {
        width: 25%;
        text-align: center;
        font-size: 16px;

        span {
            cursor: pointer;
        }

        div {
            width: 25px;
            height: 2px;
            margin: auto;
            margin-top: 8px;
        }
    }

    .menuActive {
        span {
            color: #ff6a00;
        }

        div {
            background-color: #ff6a00;
        }
    }
}

.upper-list {
    width: 100%;
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(400px,1fr) ); /* 定义3列 */
    grid-column-gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .upper-item {
        width: 31%;
        display: flex;
        align-items: center;
        margin-top: 15px;

        .book-title {
            width: 30%;
            text-align: right;
            white-space: nowrap;

            &.spe1 {
                padding-left: 6px;
                width: 27%;
            }
        }
        .time-radio{
            padding-left: 12px;
        }

        .book-text {
            width: 70%;
            height: 50px;
            font-size: 16px;
        }

        ::v-deep(.el-radio__label) {
            font-size: 16px;
        }

    }

    .below-item {
        width: 31%;
        display: flex;
        align-items: center;
        margin-top: 15px;

        .book-title {
            width: 30%;
            text-align: right;
            white-space: nowrap;
        }

        .el-select {
            width: 70%;
        }

        ::v-deep(.el-select__wrapper) {
            width: 100%;
            height: 50px;
            font-size: 16px;
        }
        .time-radio{
            padding-left: 12px;
        }
    }

    .upper-date {

        // width: 40%;
        .book-title {
            width: 30%;
            text-align: right;
            white-space: nowrap;
        }

        ::v-deep(.el-range-input) {
            font-size: 16px;
        }

        ::v-deep(.el-range-editor.el-input__wrapper) {
            width: 70%;
        }

        &.spe {
            ::v-deep(.el-range-editor.el-input__wrapper) {
                width: 80%;
            }
        }
    }

    .btn-item {
        width: 31%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 15px;

        >div {
            margin-left: 18px;
            width: 130px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }

        .btn1 {
            width: 100px;
            height: 48px;
            line-height: 48px;
            background-color: #ffe566;
        }

        .btn2 {
            width: 100px;
            height: 48px;
            line-height: 48px;
            background-color: #ffe566;
        }

        .btn3 {
            width: 100px;
            height: 48px;
            line-height: 48px;
            background-color: #e6e6e6;
            color: #666;
        }
    }
}

.tableBox {
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 6px;

    ::v-deep .el-table {
        --el-table-border: 0;
        --el-table-border-color: 0;
    }

    ::v-deep .el-table th {
        background-color: #f9f9f9;
        height: 10px;
    }

    ::v-deep .el-table tr:nth-child(odd) {
        // background-color: #f2f2f2;
    }

    ::v-deep .el-table thead {
        color: #666666;
        font-weight: 500;
    }

    ::v-deep .el-table .cell {
        line-height: 1;
    }
}

.book-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;

    .footer-button {
        background: #ff6a00;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        padding: 15px 22px;
    }

    ::v-deep(.el-pagination) {
        // width: 100%;

    }

    ::v-deep(.el-pagination.is-background .el-pager li) {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background-color: #e6e6e6;
        font-size: 18px;
    }

    ::v-deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #ff6a00 !important;
        color: var(--el-color-white);
        font-size: 18px;
    }
}

.footerNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-top: 20px;
    width: 67%;
    position: absolute;
    left: 0;
    bottom: 0px;

    .link {
        font-size: 18px;
        color: #000;
        display: block;
    }

    >div {
        width: 22%;
        height: 60px;
        line-height: 60px;
        background-color: #ffd400;
        border-radius: 10px;
        font-size: 18px;
        cursor: pointer;
    }

    .fmClass {
        background-color: #FF6A00;
        color: #fff;
    }
}

.tableTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 14px;
    padding-right: 59px;

    &.tabSpe {
        padding-right: 68px;
    }

    div:nth-child(2) {
        width: 126px;

    }
}

.vipUser {
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(250px,1fr) );
    // grid-column-gap: 10px;
    align-content: center;
    // justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid #E5E5E5;

    ::v-deep(.el-input__inner) {
        font-size: 16px !important;
    }

    ::v-deep(.el-input__wrapper) {
        background-color: #F9F9F9;
        border: none !important;
        box-shadow: none !important;
        border-radius: 6px;
    }

    ::v-deep(.el-select__wrapper) {
        box-shadow: 0 0 0 1px transparent inset;
        background-color: #F9F9F9;
    }

    ::v-deep(.el-select__placeholder) {
        font-size: 16px;
    }

    .el-input {
        height: 54px;
        width: 190px;
    }

    >div {
        width: 49%;
        display: flex;
        align-items: center;
        margin-top: 18px;

        // justify-content: end;
        // overflow: hidden;
        >div {
            width: 40%;
            text-align: right;
        }

        .frame {
            background-color: #F9F9F9;
            color: #999999;
            display: block;
            box-sizing: border-box;
            padding-left: 15px;
            // padding: 14px 5px;
            height: 46px;
            line-height: 46px;
            width: 60%;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
        }
    }
}

.vipUser div:nth-child(3) {
    padding-left: 12px;
    width: 260px;

    // position: relative;
    // left: -124px;
    div {
        width: 33%;
    }
}

.vipUser div:nth-child(4) {
    // padding-right: 38px;
    width: 200px;
    position: relative;
    right: 18px;
}

.wineInfo {
    display: flex;
    // grid-template-columns: repeat(auto-fit,minmax(250px,1fr) );
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;

    >div {
        width: 49%;
        display: flex;
        align-items: center;
        margin-top: 18px;

        >div {
            width: 40%;
            text-align: right;
        }

        .frame {
            background-color: #F9F9F9;
            color: #999999;
            display: block;
            box-sizing: border-box;
            padding-left: 15px;
            height: 46px;
            line-height: 46px;
            width: 60%;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
        }
    }

    ::v-deep(.el-input__wrapper) {
        background-color: #F9F9F9;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        font-size: 16px;
    }
}

.wineLogo {
    margin-top: 18px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    flex-wrap: wrap;

    div {
        width: 20%;
        padding-left: 11px;
        text-align: left;
        white-space: nowrap;
    }

    img {
        width: 75px;
        height: 75px;
        margin-right: 10px;
    }

    img:last-child {
        margin-right: 0;
    }
}

.UpImgBox {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .upTitle {
        width: 21%;
        text-align: right;
    }

    .ImgContent {
        display: flex;
        align-items: center;
        width: 75%;
        flex-wrap: wrap;

        .ImgList {
            display: flex;
            align-items: center;

            img {
                width: 75px;
                height: 75px;
                margin-right: 10px;
            }
        }

        .ImgAdd {
            width: 75px;
            height: 75px;
            margin-right: 10px;
            overflow: hidden;
            background-color: #E5E5E5;

            input {
                width: 75px;
                height: 75px;
                opacity: 0;
            }
        }
    }
}

.digital—continar {
    width: 100%;
    right: 0px;
    padding: 0 20px;
    position: absolute;
    bottom: 40px;
}

.digital—continarbt {
    bottom: 10px;
}

.digital {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 25px;
    background-color: #F9F9F9;
    box-sizing: border-box;
    padding: 15px 25px;
    border-radius: 10px;

    // margin-top: 200px;
    div {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        background-color: #E6E6E6;
        font-size: 16px;
        color: #212121;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 30px;
            height: 22px;
        }
    }
}

.saveHand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    div {
        width: 31%;
        // padding: 20px 0;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        border-radius: 10px;
        text-align: center;
        border: 1px solid #FF6A00;
        color: #FF6A00;
        cursor: pointer;
    }

    .confirm {
        width: 150px;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        border-radius: 10px;
        background-color: #FF6A00;
        color: #fff;
    }
}

.StorageNav {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 40px;

    >div {
        padding: 15px 30px;
        background-color: #E6E6E6;
        color: #666666;
        margin-right: 30px;
        font-size: 18px;
        border-radius: 10px;
        margin-top: 15px;
        cursor: pointer;
    }

    .StorageClass {
        background-color: #FFE566;
        color: #212121;
    }
}

.wine_continar {
    padding-top: 43px;

    .title {
        font-size: 16px;
    }
}

.overflow-y-list {
    height: 130px;
    overflow-y: auto;
}

.overflow-y-listsd {
    height: 180px !important;
    overflow-y: auto;
}

.overflow-y-list::-webkit-scrollbar {
    display: none;
    /* WebKit 浏览器 */
}

.wineSaveContent {
    .wineSaveTitle3 {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 25%;
        }

        >div:nth-child(3) {
            width: 25%;
        }

        >div:nth-child(4) {
            width: 25%;
        }
    }

    .wineSaveTitle2 {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 20%;
        }

        >div:nth-child(3) {
            width: 20%;
        }

        >div:nth-child(4) {
            width: 20%;
        }

        >div:nth-child(5) {
            width: 15%;
        }
    }

    .wineSaveTitle {
        display: flex;
        align-items: center;
        text-align: center;
        background-color: #F9F9F9;
        color: #666666;
        border-radius: 10px;
        padding: 15px 0;
        margin-top: 20px;

        >div:nth-child(1) {
            width: 25%;
        }

        >div:nth-child(2) {
            width: 20%;
        }

        >div:nth-child(3) {
            width: 20%;
        }

        >div:nth-child(4) {
            width: 20%;
        }

        >div:nth-child(5) {
            width: 15%;
        }
    }

    .wineSaveList {
        .wineSaveItem3 {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 25%;
            }

            >div:nth-child(3) {
                width: 25%;
            }

            >div:nth-child(4) {
                width: 25%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                text-align: center;
                font-size: 16px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
                width: 130%;
                text-align: center;
            }
        }

        .wineSaveItem2 {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 5px 0;

            ::v-deep(.el-select__wrapper) {
                height: 40px !important;
            }


            ::v-deep(.OptDisabled) {
                cursor: pointer;
                pointer-events: none;

                .el-select__wrapper {
                    height: 12px !important;
                    background-color: #F9F9F9;
                }

                .el-select__suffix {
                    opacity: 0;
                }
            }

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 25%;
                overflow: hidden;
                border-radius: 5px;
            }

            >div:nth-child(3) {
                width: 20%;
            }

            >div:nth-child(4) {
                width: 20%;
            }

            >div:nth-child(5) {
                width: 15%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                width: 75px;
                border-radius: 6px;
                text-align: center;
                font-size: 16px !important;
                background: #f9f9f9 !important;
                // height: 100% !important;
                height: 36px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                padding: 0 21px;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
                text-align: center;
            }
        }

        .wineSaveItemqty {
            ::v-deep(.el-input__inner) {
                height: 40px !important;
                background: #fff !important;
                border: 1px solid #E6E6E6 !important;
            }
        }

        .wineSaveItemqdis {
            ::v-deep(.el-input__inner) {
                height: 40px !important;
                background: #F9F9F9 !important;
                border: 1px solid #E6E6E6;
            }
        }

        .wineSaveItem {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;

            >div:nth-child(1) {
                width: 25%;
            }

            >div:nth-child(2) {
                width: 20%;
            }

            >div:nth-child(3) {
                width: 20%;
            }

            >div:nth-child(4) {
                width: 20%;
            }

            >div:nth-child(5) {
                width: 15%;
            }

            .el-select {
                width: 110px;
                font-size: 22px;
            }

            ::v-deep(.el-input__inner) {
                text-align: center;
                font-size: 16px !important;
            }

            ::v-deep(.el-input__wrapper) {
                background-color: #F9F9F9;
                border: none !important;
                box-shadow: none !important;
                border-radius: 6px;
            }

            ::v-deep(.el-select__wrapper) {
                box-shadow: 0 0 0 1px transparent inset;
                // width: 150px;
            }

            ::v-deep(.el-select__placeholder) {
                font-size: 16px;
            }

        }

    }
}

.wineMall {
    background-color: #fff;
    box-sizing: border-box;
    padding: 22px 40px;
    border-radius: 10px;
    margin-top: 20px;

    .MallTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F2F2F2;
        color: #666666;
        border-radius: 6px;
        padding: 15px 10px 5px 10px;

        // overflow-x: auto;
        >div {
            cursor: pointer;
        }

        .mineClass {
            // width: 150px;
            text-align: center;
        }

        .mineChose {
            width: 30px;
            height: 2px;
            margin: auto;
            margin-top: 10px;
        }

        .mineChoseClass {
            .mineClass {
                color: #FF6A00;
            }

            .mineChose {
                background-color: #FF6A00;
            }
        }
    }

    // .MallTitle::-webkit-scrollbar {
    //         display: none;
    //     }

    .MallList {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 410px;

        .MallItem {
            text-align: center;
            width: 150px;
            cursor: pointer;

            img {
                width: 150px;
                height: 150px;
                margin-top: 20px;
                vertical-align: middle;
            }

            div {
                margin-top: 15px;
            }
        }
    }
}

.tableSelect {
    white-space: nowrap;
    padding: 36px 52px 20px;

    .tableSelect-title {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding: 0 0 32px 8px;
    }

    .tableSelect-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 42px;
        background: #F2F2F2;
        border-radius: 8px;

        // padding-left: 8px;
        .tab-item {
            padding: 15px 0px;
            width: 16%;
            text-align: center;
            cursor: pointer;
            position: relative;

            &.active {
                color: #FF6A00;
            }

            .tab-item-bottom {
                position: absolute;
                bottom: 4px;
                left: 50%;
                transform: translateX(-50%);
                width: 24px;
                height: 2px;
                background-color: #FF6A00;
                border-radius: 1px;
                display: none;

                &.active {
                    display: block;
                }
            }
        }
    }

    .tableSelect-main {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
        padding-top: 20px;

        .tableSelect-main-item {
            // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
            width: calc(12.5% - 16px);
            height: 96px;
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
            line-height: 96px;
            margin: 0 8px 16px 8px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            cursor: pointer;

            &.spe {
                background: #E6E6E6;
            }

            &.active {
                background: #FFE566;
            }
        }
    }

    .popup-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-cancle {
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            margin-right: 36px;
            cursor: pointer;
        }

        .btn-submit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            cursor: pointer;
        }
    }
}

.GetMemberInfo {
    position: absolute;
    right: 2px;
    bottom: -15px;
    color: #FF6A00;
    font-size: 12px;
    width: 30px;
    cursor: pointer;
}

::v-deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
    box-shadow: 0 0 0 1px transparent inset !important;
}

.vipUser ::v-deep(.el-select__wrapper) {
    min-height: 0;
}

::v-deep .tableBox .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}

::v-deep .tableBox .el-table {
    background: #fff;
    height: 330px;
    overflow-y: scroll;
}

.input-styls-bag {
    background: #ffffff !important;
    border-bottom: 1px solid #E6E6E6 !important;
}

::v-deep .tableBox .el-table::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */

}

::v-deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #ff6a00;
    /* 选中状态边框颜色 */
    background-color: #ffffff;
    /* 选中状态背景颜色 */
}

::v-deep(.el-radio__inner:after) {
    background-color: #ff6a00;
    width: 8px;
    height: 8px;
}

::v-deep .el-radio .el-radio__label {
    color: #212121 !important;
}

::v-deep .frame_father .el-input__wrapper {
    padding-left: 15px;
    position: relative;
    top: -22px;
    left: -15px;
    background: #f9f9f9 !important;
}

::v-deep .frame_father .el-input {
    width: 140px !important;
}

::v-deep .framenotbg .el-select__wrapper {
    background: #f9f9f9 !important;
    border: none;
}

::v-deep .phone-box .el-input__wrapper {
    background: #fff !important;
    border: 1px solid #E6E6E6 !important;
}
.ke-imgbox {
    img {
        width: 100px;
        height: 100px;
    }
}
.screen-view{
  img{
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}

::v-deep .phone-box-jt .el-input__wrapper {
    background: #fff !important;
    border: 1px solid #E6E6E6 !important;
    padding-left: 14px !important;
}

</style>
